Источник: Nuances of Programming
Согласно определению из «CSS: The Definitive Guide» Эрика Майера (Eric Meyer) и Эстеля Вейля (Estelle Weyl):
С помощью (псевдо) селекторов можно назначать стили так называемым фантомным классам, которые определяются состоянием определенных элементов, шаблонами разметки в документе или даже состоянием самого документа.
В этой статье мы ознакомимся со всеми возможностями CSS, и, надеюсь, эта информация станет стимулом к использованию более простого CSS и меньшего количества JS при создании пользовательского интерфейса.
::first-line | Выбирает первую строку текста
Этот псевдоселектор влияет на первую строку текста перед разрывом строки.
p:first-line {
color: lightcoral;
}
::first-letter | Выбирает первую букву
Этот псевдоселектор применяется к первой букве текста в элементе.
::selection | Выбирает подчеркнутую (выделенную) область
С его помощью можно применять стиль к любой выделенной пользователем области.
div::selection {
background: yellow;
}
:root | Базовый элемент
Псевдокласс :root выбирает корневой элемент документа. В HTML он всегда будет представлен HTML-элементом, а в RSS — RSS-элементом.
Этот псевдоселектор чаще всего используется для хранения значений глобальных правил с использованием переменной CSS, так как он применяется к корневому элементу.
:empty | Применяется только к пустому элементу
Этот псевдоселектор выбирает любой пустой элемент, то есть тот, который не содержит пробелов, видимого содержимого или элементов-потомков.
Правило будет применено к первому и второму div, поскольку они являются пустыми, но не к третьему div, содержащему пробел.
:only-child | Выбирает единственный дочерний элемент
Применяется к элементу, который является единственным потомком своего родительского элемента.
.innerDiv p:only-child {
color: orangered;
}
:first-of-type | Выбирает первый дочерний элемент указанного типа
.innerDiv p:first-of-type {
color: orangered;
}
Здесь он будет применяться к первому дочернему .innerDiv элемента paragraph p.
Будет выбран элемент p ("These are the necessary step").
:last-of-type | Выбирает последний дочерний элемент указанного типа
Выполняет те же действия, что и :first-of-type, но влияет на последний дочерний элемент того же типа.
.innerDiv p:last-of-type {
color: orangered;
}
Применяется к последнему дочернему innerDiv элемента paragraph типа p.
Здесь будет выбран элемент p ("Do the same").
:nth-of-type() | Выбирает дочерний элемент указанного типа
Этот селектор выбирает элемент определенного типа из списка указанного родительского элемента.
.innerDiv p:nth-of-type(1) {
color: orangered;
}
:nth-last-of-type() | Выбирает дочерний элемент типа в конце списка
Этот селектор выбирает последний дочерний элемент определенного типа.
.innerDiv p:nth-last-of-type() {
color: orangered;
}
Здесь будет выбран последний дочерний элемент в списке, который содержится в innerDiv и имеет тип элемента paragraph.
Элемент p Do the same — последний дочерний элемент paragraph внутри innerDiv, поэтому к нему будет применено правило CSS.
:link | Выбирает непосещённую гиперссылку
Этот селектор применяется к ссылкам, которые не были посещены. В основном он используется с элементом anchor a с атрибутом href.
В данном примере все элементы anchor a с атрибутом href, перейдут на указанную в нем страницу, чтобы текст окрасился в оранжевый цвет.
:checked | Выбирает включенный переключатель
Этот селектор применяется к переключателю, который был выбран или включен.
input:checked {
border: 2px solid lightcoral;
}
Это правило применяется ко всем переключателям, которые были выбраны для проверки.
:valid | Выбирает допустимый элемент
Чаще всего этот селектор используется в формах для визуализации элементов form, которые проходят проверку, установленную пользователем. Затем элемент по умолчанию устанавливается с атрибутом valid.
input:valid {
boder-color: lightsalmon;
}
:invalid | Выбирает недопустимый элемент
Выполняет те же действия, что и :valid, но будет применяться к элементам, которые не прошли проверку.
input[type="text"]:invalid {
border-color: red;
}
:lang() | Выбирает элемент по указанному значению языка
Применяется к элементам, в которых указан язык содержимого.
Его можно установить двумя способами:
p:lang(fr) {
background: yellow;
}
Или:
:not() | Отрицает следующие выборы (является оператором)
Псевдоселектор отрицания выбирает те элементы, которые не содержат указанный селектор.
Рассмотрим пример:
В данном случае будут выбраны Div 1 и Div 2, поскольку они не являются элементами p.
Заключение
На этом наш список заканчивается. Помимо рассмотренных вариантов существуют и другие псевдоселекторы, однако они не являются стандартными и поэтому не были упомянуты.
Спасибо за внимание!
Читайте также:
Читайте нас в телеграмме и vk
Перевод статьи Chidume Nnamdi 🔥💻🎵🎮: CSS Pseudo-Classes You Might Have Missed