Css псевдоселекторы – Как работают псевдоклассы в CSS. Подробное объяснение с примерами и диаграммами

Содержание

Псевдоселекторы в CSS

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, что такое селекторы потомков в CSS. В данной статье я бы хотел рассказать о том, что такое псевдоселекторы в CSS и как их использовать. Вообще, когда говорят о псевдоселекторах, то сразу, в качестве примера, приводят ссылки. У ссылок может быть 4 состояния:

1) Ссылка в обычном состоянии,
2) При наведении,
3) Уже посещенная ссылка,
4) При щелчке.

Вот как раз обработка всех таких состояний (на примере ссылок), называется псевдоселекторами в CSS. Давайте создадим простую html-страницу и разместим на ней 2 ссылки. Никаких стилей в файле style.css пока задавать не будем:


<html>
<head>
	<meta charset="utf-8"/>
	<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
	<a href="https://www.yandex.ru/">yandex</a>
	</br>
	<a href="http://www.google.ru/">google</a>
</body>
</html>

Браузер умеет сам, по умолчанию, обрабатывать ссылки (обычно это синий цвет, в разных браузерах ссылка может быть подчеркнутой). Давайте зададим стиль для ссылки в файле style.css:


a {
color:black; //сделать черной
text-decoration:none; //убрать подчеркивание
}

Сейчас мы увидим, что наша ссылка стала черного цвета. Если на неё навести или щелкнуть по ней, то она всё равно будет черного цвета. Давайте зададим стили для всех 4 её состояний. Начать нужно с обычного состояния ссылки. Делается это с помощью псевдоселектора link:


a:link {
color:black; //оставим также черной
text-decoration:underline; //сделаем подчеркивание
}

Сделаем ссылку красной при наведении (с помощью псевдоселектора hover):


a:hover {
color:red; //делаем красной
text-decoration:none; //убираем подчеркивание
}

Изменим цвет посещенной ссылки на желтый (с помощью псевдоселектора visited):


a:visited {
color: yellow;
}

Также изменим цвет ссылки на зеленый при щелчке по ней (с помощью псевдоселектора active):


a:active {
color:green;
}

Обязательно наберите данный пример, чтобы закрепить материал по различным состояниям ссылки, т.к. это используется абсолютно на любом сайте.

В данной статье вы узнали, что такое псевдоселекторы в CSS.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.


Следующая статья >

Псевдоселекторы или псевдоклассы CSS.

Мы продолжаем изучать виды селекторов и после изучения селекторов потомков и потомков мы в этом уроке рассмотрим еще один вид селекторов — это псевдоселекторы или как их еще чаще называют псевдоклассы.

Такие псевдоклассы, псевдоселекторы могут применятся к любым элементам. В этом же уроке рассмотрим в основном применение псевдоклассов к ссылкам. Вы уже возможно заметили, что обычная ссылка имеет несколько состояний, то есть изначально ссылка имеет синий цвет, при щелчке мыши на нее она становится красной и уже посещенная ссылка принимает фиолетовый цвет. Это и есть псевдо состояния ссылок.

То есть первое состояние, когда ссылка находится в спокойном (нетронутом) состоянии, второе состояние — когда наводится мышь на ссылку, третье — щелчок мыши и последнее это уже посещенная ссылка которая принимает уже заданный цвет. Для каждого такого состояния можно задать свои стили и изменить их.

Делается это следующим образом: для ссылки тега <a> через двоеточие, указывается состояние ссылки. При этом всем важна последовательность использования псевдоэелементов, псевдоклассов.

Начальное состояние ссылки: Псевдокласс — :link

1. Первичное (начальное) состояние ссылки должно отмечается как

:link и уже в фигурных скобках указываем цвет, возьмём красный. Для выбора цвета можно воспользоваться программой.

CSS

a:link{
color: #FF0000;
}

Теперь ссылка в обычном состоянии будет красного цвета.

Примечание: псевдокласс :link для ссылок указывать не обязательно, так как он присвоен для ссылки по умолчанию и структура записи a:link{ color: #FF0000;} равносильна записи a { color: #FF0000;}

Посещенная ссылка: Псевдокласс — :visited

2. Следующее состояние, которое нужно указать это, когда ссылку уже посетили. Для посещенного состояния применяется псевдокласс :visited с английского переводится как посещенной. И для посещенной ссылки зададим желтый цвет.

CSS

a:visited {
color: #FFDD00;
}

Состояние ссылки при наведении мыши: Псевдокласс — :hover

3. Третье состояние ссылки это :hover. В это состояние ссылка попадает когда на нее наводят курсор мыши. Покрасим ссылку в зеленый цвет при наведении на нее курсора.

CSS

a:hover {
color: #008000;
}

Активная ссылка: Псевдокласс — :active

4. И последнее состояние — это момент щелчка на ссылку :active и для него давайте зададим синий цвет.

CSS

a:active{
    color: #0000FF;
} 

Теперь, если Вы перезагрузите страницу с Вашей ссылкой, она будет иметь цвет начального состояния (синий) и при изменении каждого своего псевдосостояния ссылка будет менять цвет на тот, что ей указали в стилях. Вот таким образом, с помощью изменения псевдокласса можно задать стили для выбранного элемента. На примере были заданы четыре состояния ссылки.

HTML

Самая обычная ссылка

CSS

a:link {
    color: #FF0000;
}
a:visited {
    color: #FFDD00;
}
a:hover {
    color: #008000;
}    
a:active {
    color: #0000FF;
}  

Возможно возник вопрос: а что если не нужно изменять цвет ссылки и она должна оставаться всегда одно цвета? В таких случаях задается цвет напрямую для ссылки, только для тега <a>, не используя при этом, ни каких псевдоклассов или псевдоселекторов.

CSS

a {
    color: #000000;
} 

Теперь ссылка всегда будет иметь черный цвет, как при наведении, так при клике на нее. И после посещения она будет оставаться черной.

Если для ссылки совсем не указывать ни каких правил, то браузер будет использовать свои собственные стили и правила, которые ему уже заранее вложены. Но как мы уже узнали все эти правила, мы можем переопределить с помощью CSS на те, которые нам нужны.

Вот так мы рассмотрели как для элемента ссылки задавать псевдосостояния используя псевдоклассы или псевдоселекторы. Эти псевдоселекторы достаточно часто используются для оформления страниц. Имеются и другие псевдоклассы, они немного сложнее, чем эти, поэтому мы их рассмотрим немного позже, когда Вы немного освоитесь

CSS. В Демо можно просмотреть результат работы кода из сегодняшнего урока. На этом уроке мы завершим с селекторами, так как мы рассмотрели уже все виды селекторов и перейдем к урокам по созданию условий для этих селекторов.


CSS: псевдоэлементы и псевдоклассы

Временами кажется, что для того чтобы выжить в современном мире, необходимо знать, как создавать сайты. Даже в школах обучают основам HTML. Но для создания качественного ресурса этого мало. Необходимо еще знать основы каскадной таблицы стилей, в частности псевдоклассы и псевдоэлементы CSS.

Что это такое?

По негласному закону все стили, которые веб-мастер вписывает в CSS-разметку, используются для тех элементов структуры, которые можно увидеть в исходном коде. Однако существуют группы элементов, которые не прописываются в HTML-документе, однако для них тоже нужно задавать стили.

К примеру, в HTML-файле нет ни одно тега, который бы отвечал за дизайн заглавной буквы нового абзаца или области, что находится перед определенным элементом. Да и тегами невозможно показать активность ссылок или изменить изображение, когда курсор мышки наводят на него. Чтобы оформить эти и множество других значений, существуют селекторы CSS: псевдоклассы и псевдоэлементы.

Псевдоклассами называют селекторы, которые влияют на существующие элементы документа. Псевдоэлементами обычно задают и меняют область, которая изначально отсутствовала в исходном файле. Проще говоря, псевдоэлементы задают новые области страницы, которых не было в HTML-разметке, а псевдоклассы определяют состояние объектов при определенных условиях.

После: after

Первое, на что стоит обратить внимание, – псевдоэлементы CSS before и after, так как каждый уважающий себя ресурс использует их для усовершенствования внешнего вида, читабельности и привлекательности сайта. Эти элементы предоставляют возможность добавления новых областей, надписей и стилей до или после исходного документа.

Каждый, наверное, хотя бы раз видел на каком-либо сайте анонсы публикаций, после которых стояли слова: «Новинка», «Новое» или «Шок», «Избранное», «Лучшее», «Супер» и т. д. Эти объекты были заданы при помощи псевдоэлемента CSS after.

Чтобы создать такую позицию, необходимо добавить в каскадную таблицу стилей такой код:

Здесь словом new задается название нового класса, поэтому перед нужным абзацем в HTML разметке нужно вписать:. Название класса должно находиться между скобками открывающего тега. Если все сделать правильно, то после окончания абзаца на странице браузера появится надпись «Кое-что новенькое».

Естественно, в примере задан скрипт для простой надписи, но никто не говорил, что нельзя менять размер, цвет и позиционирование. Все необходимые параметры можно вписать в класс new после характеристики content. Разделять их нужно точкой с запятой и в конце закрыть фигурную скобку.

До: before

Практически идентичными характеристиками обладает псевдоэлемент CSS before. С одним небольшим отличием: он предназначен для того, чтобы добавлять необходимые элементы перед объектом. Записывается точно так же, как и after, только со словом before.

Перед очередным абзацем текста можно добавить слова, которые привлекают внимание, а можно просто поместить перед текстом рисунок или элемент Юникода. К примеру, открывающие кавычки или отступы. Чтобы воплотить это в жизнь, необходимо добавить в CSS-разметку новый класс и задать необходимые характеристики. Самое простое решение будет выглядеть следующим образом:

Чтобы сделать отступы в конце документа, необходимо создать псевдокласс after и вместо content: open написать content: close, соответственным образом поменять позиционирование. Если в псевдоклассе before отступ был от левого поля, то в классе after он должен быть от правого. Также в разметку можно добавить изображение (допустим, тех же кавычек), и текст уже не будет смотреться как унылая простыня.

Эпичная сага: first

Большой популярностью в создании новых проектов пользуется и псевдоэлемент CSS first. В частности, это касается проектов с развлекательной и сказочной тематикой, а также веб-ресурсов исторического и научного направления.

Этот псевдоэлемент CSS имеет две характеристики — line и letter:

  • Letter – изменяет первую букву того фрагмента текста, к которому его добавляют. Таким образом, он формирует буквицу – элемент, в котором базовая линия находится на несколько строк ниже относительно главного текста. Чтобы задать этот параметр в каскадной таблице стилей, нужно задать характеристики для параграфа. Например, P:first-letter {*** } — и уже между скобками указать все необходимые параметры, такие как цвет, шрифт, размер. Если буквицу необходимо создать только для первого абзаца, тогда создается новый класс (так же, как и в примере с new: after).
  • Line – эта позиция полностью меняет первую строку абзаца. Очень удобно использовать в научных публикациях, если нужно выделить важную информацию. Записывается так же, как и прочие примеры. Но здесь важно помнить, что псевдоэлемент выделяет не предложение, а именно строку. В зависимости от того, каким браузером пользуется пользователь, у него первая строка может быть длиннее или короче, поэтому важно следить за тем, чтобы это выделение не смотрелось нелепо. Именно для таких случаев был создан в CSS псевдоэлемент переноса строки.

Новая строка

По факту этот элемент используется редко, ведь его успешно заменяет тег <br>. Однако существуют ситуации, когда необходимо задавать разрыв строки именно псевдоэлементами. Для этих целей можно использовать тот же after. Для этого записывается следующий код: after { content: ‘\A’; white-space: pre;}. Название класса нужно вписать между скобками открывающего тега, как только он закроется, после него и будет следовать разрыв строки.

Такой вариант отнимает больше времени при конструировании читабельного контента, и если нет необходимости работать с аномально неизведанными браузерами, то лучше ограничиться тегом <br>.

Синтаксис псевдоклассов

Как уже было сказано, псевдоклассы определяют состояние элементов, с которыми взаимодействует пользователь. В отличие от псевдоэлементов CSS, которые задают невидимые структуре характеристики, мнимые классы ориентированы на поведенческие факторы. Чтобы было понятнее, можно привести небольшой пример. Допустим, на сайте есть список полезных ссылок, пользователь переходит по ним, читает информацию, но спустя время наталкивается на тот контент, который уже видел. Он просто перешел на эту страницу еще раз, ведь ссылок много, и они ничем не отличаются. Чтобы такого не происходило, веб-мастера добавляют псевдокласс, который меняет цвет просмотренной ссылки, тогда пользователь будет точно знать, что он читал, а куда еще не переходил.

Все псевдоклассы записываются в таблицу каскадных стилей простым и проверенным синтаксисом:

  • Селектор: Псевдокласс {характеристики стиля: цвет, размер, отступ, позиционирование и т. д.}

Эти классы можно разделить на три основные группы:

  • те, что определяют состояние элемента;
  • те, что относятся к псевдоэлементам;
  • фиктивные классы, определяющие язык контента.

Псевдоклассы и состояние элементов

Рассмотрим же по порядку, какими могут быть псевдоклассы. Для первого подвида характерно изменение состояние элемента в зависимости от его состояния в конкретный момент. Это как было в примере выше: если по ссылке перешли, то она поменяет цвет. Сюда относят такие псевдоклассы:

  • :active. Если применить этот псевдокласс, то при нажатии мышкой на отдельный фрагмент он станет активным. Это проявится в изменении цвета, увеличении размера, или появится анимация.
  • :link. В основном применяется к ссылкам, которые пользователь еще не посещал. Они остаются неизмененными.
  • :focus. Чаще всего используют для текстовых документов, когда пользователь, установив на поле курсор, может поменять цвет текста. Иногда это используют и для изображений. Например, выставляют картинку затененную, но при щелчке она приобретает естественный цвет.
  • :hover. Когда пользователь просто наводит мышкой на определенный объект, он может поменять цвет или форму, при этом ему не нужно делать щелчок.
  • :visited. В основном этот псевдокласс предназначен для посещенных ссылок, которые меняют свой цвет на фиолетовый по умолчанию.

Новички ошибочно предполагают, что эти псевдоклассы предназначены только для ссылок, но при должном желании и фантазии изменить можно любой элемент сайта.

Специально для псевдоэлементов CSS

К этой группе селекторов относят псевдоклассы, которые могут изменить псевдоэлементы. Таким псевдоклассом является :first-child. В каскадной таблице стилей необходимо создать новый класс для :first-child и задать цвет текста или его размер. Результат будет иметь следующий вид:

  • B:first-child { color: red; }

Чаще всего это делают тогда, когда необходимо выделять несколько фрагментов текста жирным шрифтом и только начало абзаца должно отличаться. Поэтому класс называют так же, как и тег, который отвечает за полужирный текст. Если применить это на практике, то благодаря псевдоклассу только первый выделенный полужирным шрифтом фрагмент будет иметь красный цвет, остальные слова будут стандартного черного цвета.

Также :first-child используют, чтобы убрать отступ в первом абзаце, тогда вместо color: red; необходимо будет написать text-indent: 0;, а В заменить на Р (также обозначается тег, который отвечает за начало абзаца).

Язык контента

Псевдокласс :lang в основном применяется к текстам, которые написаны разными языками. Например, если в статье есть цитаты на языке оригинала, то для них можно задать отдельные характеристики. Синтаксис для этого кластера будет иметь следующий вид:

  • Название класса:lang (язык) {характеристики текста (цвет, шрифт, вид и т.д.)}

Что касается позиции «язык», то он обозначается согласно принятым нормам. Например, английский — en, русский — ru, немецкий — de и т. д. Благодаря этому псевдоклассу можно изменить стиль иностранного текста во всем документе.

Выводы

Псевдоклассы и псевдоэлементы CSS — это один из тех вопросов о каскадной таблице стилей, которые вызывают трудности в понимании. Однако здесь нет ничего сложного, главное — понимать, что псевдокласс – это определенное состояние, что выполняется при оговоренных ранее условиях. Например, при наведении курсора или щелчке мышки. Псевдоэлемент – самостоятельная часть документа, которая не входит в состав HTML-разметки, но может иметь свой стиль. Можно даже сказать, что это виртуальный HTML. Если посмотреть на ситуацию с такой стороны, то все становится предельно простым и понятным, а с такими знаниями уже можно начинать создавать сайты.

Псевдоклассы CSS — Как создать сайт

Изучаем псевдоклассы в CSS

Добрый день, друзья, сегодня разберём понятие псевдокласса в языке CSS (разницу между псевдоклассом и псевдоэлементом смотрите в конце статьи).

Псевдоклассы — это специальные команды, с помощью которых можно реализовывать более тонкую выборку элементов и задавать им CSS-свойства, а также воспроизводить некоторые анимационные эффекты.

Обычная схема псевдокласса в CSS, выглядит следующим образом:


селектор:псевдокласс {
 CSS-свойства: значения;
}

Или


:псевдокласс {
 CSS-свойства: значения;
}

Перед именем псевдокласса, ставится двоеточие.

Распространённый пример псевдокласса, это изменение внешнего вида элемента, при наведении на него курсора мыши. Например вы можете увидеть данный эффект, если наведёте курсор мыши на ссылку находящуюся в боковом меню: снизу у ссылки появится подчеркивание. Этот анимационный эффект, появляется благодаря псевдоклассу :hover.

В CSS-коде это выглядит следующим образом:


/* Отключаем подчеркивание у ссылок */
a {
 text-decoration:none;
}
/* Включаем подчёркивание, при 
наведении на неё, курсором мыши */
a:hover {
 text-decoration:underline;
}

С помощью псевдокласса

:hover, помимо ссылок также можно изменять внешний вид и других элементов. Например на моём сайте для вебмастеров, происходит подсвечивание строк таблицы при наведении на них курсором мыши, данный эффект вы можете увидеть в статье Цвета в CSS

В CSS-коде это выглядит следующим образом:


table tr:hover {
 background:#ddd;
}

Какие псевдоклассы существуют в CSS?

Рассмотрим, какие псевдоклассы существуют в языке CSS.

Псевдоклассы работающие с состоянием элемента

  • :link — задаёт CSS-свойства ссылкам, но не якорям
  • :visited — задаёт CSS-свойства уже посещённым ссылкам
  • :hover — задаёт CSS-свойства при наведении курсора мыши на элемент
  • :active — задаёт CSS-свойства при нажатии левой кнопкой мыши по элементу, при условии что кнопка мыши еще не отпущена
  • :focus — задаёт CSS-свойства при получении элементом фокуса, например щелкнули по текстовому полю (для того чтобы ввести данные), фокус могут получить (ссылки, кнопки, элементы формы), помимо щелчка мыши фокус могут получать элементы при нажатии на кнопку табуляции (Tab) на клавиатуре

Псевдоклассы применяемые к элементам формы

  • :checked — задаёт CSS-свойства при выделении элементов формы, таких как флажки (radio) или переключаетели (checkbox)
  • :disabled — задаёт CSS-свойства отключённым (заблокированным) элементам формы
  • :enabled — задаёт CSS-свойства включённым (обычным) элементам формы
  • :optional — задаёт CSS-свойства не обязательным для заполнения элементам формы input, у которых отсутствует атрибут required
  • :required — задаёт CSS-свойства обязательным для заполнения элементам формы input, у которых имеется атрибут required

Псевдоклассы работающие с деревом элементов

  • :first-child — задаёт CSS-свойства первому потомку родителя (родитель потомок:first-child { })
  • :last-child — задаёт CSS-свойства последнему потомку родителя
  • :first-of-type — задаёт CSS-свойства первому потомку родителя по типу
  • :last-of-type — задаёт CSS-свойства последнему потомку родителя по типу
  • :nth-child — задаёт CSS-свойства потомкам родителя на основе их нумерации в структуре HTML-документа или внутри родителя (:nth-child(odd|even|число|выражение))
  • :nth-last-child — то же что и :nth-child, только нумерация идёт с конца
  • :nth-of-type — задаёт CSS-свойства потомкам элемента по типу, на основе их нумерации в структуре HTML-документа или внутри родителя (:nth-of-type(odd|even|число|выражение))
  • :nth-last-of-type — то же что и :nth-of-type, только нумерация идёт с конца
  • :only-child — задаёт CSS-свойства элементу потомку, при условии что он единственный у родителя
  • :only-of-type — задаёт CSS-свойства элементу потомку по типу, при условии что он единственный у родителя

Под родителем тут понимается обычный селектор, в котором находятся данные элементы.

Остальные псевдоклассы

  • :empty — задаёт CSS-свойства, пустым элементам страницы, внутри которых ничего нету, даже пробела, например <span></span> или <td></td>
  • :not(селектор) — задаёт CSS-свойства всем элементам, кроме селекторов указанных в скобках
  • :target — задаёт CSS-свойства для элементов, к которым переходят по ссылкам-якорям

Разница между псевдоклассом и псевдоэлементом заключается в следующем: псевдокласс задает стиль для элемента страницы, а псевдоэлемент задаёт стиль для части элемента страницы и даже может создавать дополнительную часть.

На этом пока всё, хотите узнать Разницу между псевдоклассами nth-child и nth-of-type, тогда добро пожаловать в следующий урок 🙂

Детские татарские стихи — для малышей и их родителей, участвующих на утренниках в детском саду.

Дата публикации поста: 5 февраля 2016

Дата обновления поста: 26 октября 2014


Навигация по записям

CSS3 | Псевдоклассы форм

Псевдоклассы форм

Последнее обновление: 21.04.2016

Ряд псевдоклассов используется для работы с элементами форм:

  • :enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)

  • :disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)

  • :checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)

  • :default: выбирает элементы по умолчанию

  • :valid: выбирает элемент, если его значение проходит валидацию HTML5

  • :invalid: выбирает элемент, если его значение не проходит валидацию

  • :in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)

  • :out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне

  • :required: выбирает элемент, если у него установлен атрибут required

  • :optional: выбирает элемент, если у него не установлен атрибут required

Псевдоклассы enabled и disabled

Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :enabled {
				border: 2px black solid;
				color: red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" value="Enabled" /></p>
        <p><input type="text" disabled value="Disabled" /></p>
    </body>
</html>

Псевдокласс checked

Псевдокласс checked стилизует элементы формы, у которых установлен атрибут checked:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :checked + span {
				color: red;
				font-weight: bold; 	/* выделение жирным */
			}
        </style>
    </head>
    <body>
			<h3>Выберите технологию</h3>
			<p>
                <input type="checkbox" checked name="html5"/><span>HTML5</span>
            </p>
            <p>
                <input type="checkbox" name="dotnet"/><span>.NET</span>
            </p>
            <p>
                <input type="checkbox" name="java"/><span>Java</span>
            </p>
			
			<h3>Укажите пол</h3>
			<p>
                <input type="radio" value="man" checked name="gender"/><span>мужской</span>
            </p>
            <p>
                <input type="radio" value="woman" name="gender"/><span>женский</span>
            </p>
    </body>
</html>

Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.

Псевдокласс default

Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :default {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <input name="login"/>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы valid и invalid

Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            input:invalid {
				border: 2px solid red;
			}
			input:valid {
				border: 2px solid green;
			}
        </style>
    </head>
    <body>
		<form>
            <p><input type="text" name="login" placeholder="Введите логин" required /></p>
            <p><input type="password" name="password" placeholder="Введите пароль" required /></p>
            <input type="submit" value="Войти" />
        </form>
    </body>
</html>

Псевдоклассы in-range и out-of-range

Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли их значение в определенный диапазон. Это в первую очередь относится к элементу <input type="number" >.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :in-range {
				border: 2px solid green;
			}
			:out-of-range {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
            <p>
				<label for="age">Ваш возраст:</label> 
				<input type="number" min="1" max="100" value="10" name="age"/>
			</p>
            <input type="submit" value="Отправить" />
        </form>
    </body>
</html>

Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:

Псевдоклассы required и optional

Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут required:


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы в CSS3</title>
        <style>
            :optional {
				border: 2px solid blue;
			}
			:required {
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
		<form>
			<p>
				<label for="login">Логин:</label> 
				<input type="text" name="login" required />
			</p>
			<p>
				<label for="password">Пароль:</label> 
				<input type="password" name="password" required />
			</p>
            <p>
				<label for="name">Имя:</label> 
				<input type="text" name="name"/>
			</p>
            <input type="submit" value="Регистрация" />
        </form>
    </body>
</html>

особенности спецификации level 4, псевдо-классы и псевдо-элементы

CSS селекторы — интригующий Selectors level 4

От автора: CSS селекторы массово прогрессировали на протяжении многих лет, предоставляя разработчикам гораздо больше возможностей для ориентации определенных битов на своих страницах. Примеры в этой статье являются частью спецификации Selectors CSS level 4. Давайте погрузимся и исследуем семь из этих интригующих селекторов, из которых, я гарантирую, некоторые вы ещё ни разу не использовали на практике!

Selectors level 4

The Level 4 спецификация, безусловно, содержит не только известные селекторы, такие как nth-child, но и некоторые уникальные символы. Большая часть спецификации level 4 описывает много новых и полезных псевдо-классов и псевдо-селекторов, поэтому в этом вопросе давайте кратко рассмотрим, какая разница между одиночными и двойными двоеточиями, когда речь идет о псевдо в CSS.

Одиночные vs. двойные двоеточия

Как правило, в наши дни вместо двоеточия : следует использовать двойные двоеточия ::, чтобы отличать псевдо-классы от псевдо-элементов и содержимого, как указано в спецификации.

CSS селекторы — интригующий Selectors level 4

«Эта запись с двумя двоеточиями введена …, чтобы установить дискриминацию между псевдо-классами и псевдо-элементами. Для совместимости с существующими таблицами стилей браузеры также должны принимать предыдущее обозначение одиночным двоеточием для псевдо-элементов, введенных в CSS-level 1 и 2 (а именно: first-line,: first-letter, before и: after). Эта совместимость не допускается для новых псевдо-элементов, введенных в CSS-level 3. »— Спецификация W3C

CSS селекторы — интригующий Selectors level 4

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Хорошо, это понятно, но в чем разница между классами и элементами?

Псевдо-классы vs. Псевдо-элементы

Псевдо-класс всегда состоит из «двоеточия» :, за которым следует имя псевдо-класса (ключевое слово), а для функциональных псевдо-классов — один или несколько аргументов между круглыми скобками (подобно функциям CSS). Это метод, позволяющий авторам указывать и настраивать особое состояние выбранного элемента(ов).

«Псевдо-классы позволяют применять стиль к элементу не только по отношению к содержимому дерева документов, но и по отношению к внешним факторам, таким как история навигатора ( :visited, например), статус его содержимого (например, :checked на определенных элементах формы) или на позицию мыши (например :hover, которая позволяет узнать, находится ли мышь над элементом или нет). — MDN Web Docs

Псевдо-элементы создают абстракции о дереве документов, кроме тех, которые указаны языком документа. Например, языки документа не предлагают механизмов доступа к «первой букве» или «первой строке» содержимого элемента. Псевдо-элементы позволяют авторам ссылаться на эту неприемлемую информацию.

Псевдо-элементы также предоставляют авторам механизм для ссылки на контент, которого нет в исходном документе, таких как известные ::before и ::after псевдо-элементы, которые разрешают доступ к сгенерированному контенту в CSS 2.

Теперь, когда мы установили связь, давайте погрузимся и исследуем некоторые из этих интригующих селекторов CSS level 4.

: matches ()

Псевдо-класс :matches(), несомненно, сильный селектор пришедший с level 4, но браузеры пока всё еще обсуждают его включение за исключением Safari (WebKit).

Его можно использовать для объединения нескольких правил выбора в одну лаконичную линию. Он принимает список селекторов в качестве аргумента. Эти аргументы могут быть составными селекторами и комплексными селекторами, однако селекторы комбинаторов не допускаются.

/* Chrome */ :-webkit-any(:hover, :focus, :active) { color: #222; } /* Firefox */ :-moz-any(:hover, :focus, :active) { color: #222; } /* Safari */ :matches(:hover, :focus, :active) { color: #222; }

/* Chrome */

:-webkit-any(:hover, :focus, :active) {

  color: #222;

}

/* Firefox */

:-moz-any(:hover, :focus, :active) {

  color: #222;

}

/* Safari */

:matches(:hover, :focus, :active) {

  color: #222;

}

В то время как этот фрагмент сочетает все наши общие состояния для :hover, :focus и: activeв один набор правил, он все еще не раскрыл потенциал, которым он обладает. Ниже мы рассмотрим более сложный пример.

Если вы знакомы с вложенностью, будьте готовы прийти в восторг. Matches могут сочетаться с другими :matches селекторами, чтобы имитировать ту же самую функцию, которую многие пользователи препроцессора обожают, но изнутри CSS!

:matches(section, article) :matches(h2, h3, h4, h5, h5, h6) { color: goldenrod; } /* equivalent to: */ section h2, section h3, section h4, section h5, section h5, section h6, article h2, article h3, article h4, article h5, article h5, article h6 { color: goldenrod; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

:matches(section, article) :matches(h2, h3, h4, h5, h5, h6) {

  color: goldenrod;

}

/* equivalent to: */

section h2,

section h3,

section h4,

section h5,

section h5,

section h6,

article h2,

article h3,

article h4,

article h5,

article h5,

article h6 {

  color: goldenrod;

}

Можно даже объединить их вместе, чтобы открыть еще один набор возможностей.

/* Firefox */ :-moz-any(a):-moz-any(:link, :visited) { color: blue; } :-moz-any(a):-moz-any(:hover, :focus, :active) { color: red; text-decoration: none; } /* Chrome */ :-webkit-any(a):-webkit-any(:link, :visited) { color: blue; } :-webkit-any(a):-webkit-any(:hover, :focus, :active) { color: red; text-decoration: none; } /* Safari */ :matches(a):matches(:link, :visited) { color: blue; } :matches(a):matches(:hover, :focus, :active) { color: red; text-decoration: none; }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

/* Firefox */

:-moz-any(a):-moz-any(:link, :visited) {

  color: blue;

}

:-moz-any(a):-moz-any(:hover, :focus, :active) {

  color: red;

  text-decoration: none;

}

/* Chrome */

:-webkit-any(a):-webkit-any(:link, :visited) {

  color: blue;

}

:-webkit-any(a):-webkit-any(:hover, :focus, :active) {

  color: red;

  text-decoration: none;

}

/* Safari */

:matches(a):matches(:link, :visited) {

  color: blue;

}

:matches(a):matches(:hover, :focus, :active) {

  color: red;

  text-decoration: none;

}

Этот пример эквивалентен написанию:

a:link, a:visited {…} a:hover, a:focus, a:active {…}

a:link,

a:visited {…}

a:hover,

a:focus,

a:active {…}

Имейте в виду, что :matches() не может быть вложен ( :matches(:matches())) и не работает с :not() ( :matches(:not()), :not(:matches())).

К сожалению, спецификация для этого селектора закрепилась только в Safari и по-прежнему ждёт от других разработчиков браузеров поддержки, поэтому вам придется использовать отдельные декларации и префиксы поставщиков. В настоящее время такие инструменты, как Autoprefixer, не поддерживают :matches(), но не бойтесь, поскольку недавно я поднял на GitHub вопрос о предоставлении этой поддержки.

Если у вас есть пример использования этого селектора и вы хотите поделиться им, отправьте его в комментариях ниже. Нам всегда нравятся хорошие демо-версии CodePen!

: placeholder-shown

Элементы ввода имеют возможность указывать текст заполнителя для пользователя, который должен быть введен. Это происходит, когда атрибут placeholder присутствует во входном теге и, таким образом, соответствует элементу ввода, отображающему текст заполнителя.

/* affects entire input */ :placeholder-shown { opacity: 1; /* works */ color: gold; /* sketchy */ background: blue; /* works */ font-weight: bold; /* works */ border: 1px solid red; /* works */ } /* only affects placeholder text */ ::placeholder { opacity: 1; /* works */ color: gold; /* works */ background: goldenrod; /* works */ font-weight: bold; /* works */ border: 1px solid red; /* works */ }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/* affects entire input */

:placeholder-shown {

  opacity: 1; /* works */

  color: gold; /* sketchy */

  background: blue; /* works */

  font-weight: bold; /* works */

  border: 1px solid red; /* works */

}

/* only affects placeholder text */

::placeholder {

  opacity: 1; /* works */

  color: gold; /* works */

  background: goldenrod; /* works */

  font-weight: bold; /* works */

  border: 1px solid red; /* works */

}

По сути, :placeholder-shown это выбор самого входа, когда отображается его текст-заполнитель, а напротив ::placeholder, который стилизует текст-заполнитель. На самом деле есть документация о: :placeholder, отмеченная в CSS Pseudo-Elements Module Level 4 Editors Draft. Имейте в виду, что :placeholder-shown это псевдо-класс (элемент в определенном состоянии) а ::placeholder — псевдо элемент (видимая вещь, которая на самом деле не входит в DOM).

CSS селекторы — интригующий Selectors level 4

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Во время моего исследования я обнаружил, что color это особое свойство (когда для изменения цвета текста заполнителя используется :placeholder-shown), которое удостоено вниманием только в браузере Firefox, тогда как Chrome и Safari поддерживают серый цвет текста заполнителя.

: any-link

Псевдо-класс :any-link представляет собой элемент, который действует в качестве источника якоря гиперссылки.

Например, в HTML5, любой <a>, <area> или <link> элементы с атрибутом href являются гиперссылками, которые соответствуют :any-link и эквивалентны :matches(:link, :visited). По-моему, это действительно своеобразный селектор и по-прежнему ожидает лучшего имени, однако в наши дни, за исключением Edge, поддержка довольно широка.

В настоящее время Autoprefixer поддерживает это свойство и предоставляет правильные префиксы поставщиков для браузеров, которые их требуют.

: indeterminate

Псевдо-класс :indeterminate является селектором, предназначенным для определенных элементов формы и применимым ко всем средам.

:indeterminate { outline: 2px solid red; }

:indeterminate {

  outline: 2px solid red;

}

Обычно этот селектор будет соответствовать входам, таким как радио и флажки, когда нет атрибута checked. Входы, подобные этим, могут существовать без каких-либо проверенных или непроверенных состояний.

Он также выбирает элементы, типа элемент progress без value атрибута контента (т. е. когда процентное завершение неизвестно). В настоящее время поддержка многих широко используемых поставщиков стабильна.

: user-error

Псевдо-класс :user-error представляет входной элемент с неправильным вводом, но только после того, как пользователь начнёт с ним взаимодействовать. Например, с момента, когда пользователь попытался отправить форму или перед тем, как пользователь начинает работу с элементом формы.

:user-error { background: red; color: red; border: 2px solid red; }

:user-error {

  background: red;

  color: red;

  border: 2px solid red;

}

Однако поддержки нет, и нет способа узнать, будут ли они реализованы крупными поставщиками браузеров. На данный момент лучше использовать :invalid или :required, если нужен такой стиль оформления ошибок для веб-форм.

:invalid { background: red; color: red; border: 2px solid red; }

:invalid {

  background: red;

  color: red;

  border: 2px solid red;

}

: optional

Псевдо-класс : optional может использоваться, когда значение действительно и до того, как будет отправлена его форма.

Он выбирает любой input или textarea элемент, который не имеет атрибута required. Это позволяет формам легко указывать необязательные поля и соответствующим образом их форматировать.

Это один из очень легко задокументированных селекторов, включенных в черновик спецификации Selectors level 4.

: scope

Псевдо-класс :scope может ограничивать правила стиля, которые применяются только к части страницы, устанавливая scoped атрибут для <style> элемента (прямой дочерний элемент корня элемента поддерева, к которому вы хотите применить стили). Он ограничивает стили воздействием только на элемент, который является родительским элементом элемента <style> и всех его потомков, или, другими словами, родителем <style scoped> элемента и всего внутри.

<ul> <style scoped> :scope { color: red; } </style> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul>

<ul>

  <style scoped>

    :scope {

       color: red;

    }

  </style>

  <li>item 1</li>

  <li>item 2</li>

  <li>item 3</li>

</ul>

К сожалению, большинство браузеров не поддерживают его или поддержали в свое время, но потом полностью удалили. И хотя Chrome и Safari регистрируют совпадение псевдо-класса и, следовательно, применяют правило CSS, они пока не поддерживают самостоятельность стиля; это означает, что применяемое правило CSS выходит за пределы предполагаемой части документа и приравнивается к :root.

Исходя из текущих исследований, Chrome 35 и FF 55 удалили поддержку, однако было время, когда Chrome и Firefox поддерживались :scope. Все эти back и forth делают внешний вид видимой области довольно мрачным, и согласно Can I Use, большинство браузеров в настоящее время имеют поддержку обозначенную флажком.

CSS селекторы — интригующий Selectors level 4

Вывод

Конечно, есть некоторые очень перспективные Selectors Level 4 и многие другие, не упомянутые в этой статье. Как и в любой форме спецификации, некоторые селекторы могут слегка меняться со временем или полностью удаляться. Нам, как разработчикам, нужно цепляться за те, которые мы ценим больше всего, и следить за тем, чтобы команды отвечали. Успешного кодирования!

Автор: Dennis Gaebel

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

CSS селекторы — интригующий Selectors level 4

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее CSS селекторы — интригующий Selectors level 4

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *