Псевдоклассы CSS, на которые стоит обратить внимание
Согласно определению из «CSS: The Definitive Guide» Эрика Майера (Eric Meyer) и Эстеля Вейля (Estelle Weyl):
С помощью (псевдо) селекторов можно назначать стили так называемым фантомным классам, которые определяются состоянием определенных элементов, шаблонами разметки в документе или даже состоянием самого документа.
В этой статье мы ознакомимся со всеми возможностями CSS, и, надеюсь, эта информация станет стимулом к использованию более простого CSS и меньшего количества JS при создании пользовательского интерфейса.
::first-line | Выбирает первую строку текста
Этот псевдоселектор влияет на первую строку текста перед разрывом строки.
p:first-line {
color: lightcoral;
}
::first-letter | Выбирает первую букву
Этот псевдоселектор применяется к первой букве текста в элементе.
.innerDiv p:first-letter {
color: lightcoral;
font-size: 40px
}
::selection | Выбирает подчеркнутую (выделенную) область
С его помощью можно применять стиль к любой выделенной пользователем области.
div::selection {
background: yellow;
}
:root | Базовый элемент
Псевдокласс :root выбирает корневой элемент документа. В HTML он всегда будет представлен HTML-элементом, а в RSS — RSS-элементом.
Этот псевдоселектор чаще всего используется для хранения значений глобальных правил с использованием переменной CSS, так как он применяется к корневому элементу.
:empty | Применяется только к пустому элементу
Этот псевдоселектор выбирает любой пустой элемент, то есть тот, который не содержит пробелов, видимого содержимого или элементов-потомков.
div:empty {
border: 2px solid orange;
}
<div></div>
<div></div>
<div>
</div>
Правило будет применено к первому и второму div, поскольку они являются пустыми, но не к третьему div, содержащему пробел.
:only-child | Выбирает единственный дочерний элемент
Применяется к элементу, который является единственным потомком своего родительского элемента.
.innerDiv p:only-child {
color: orangered;
}
:first-of-type | Выбирает первый дочерний элемент указанного типа
.innerDiv p:first-of-type {
color: orangered;
}
Здесь он будет применяться к первому дочернему .innerDiv элемента paragraph p.
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
Будет выбран элемент p ("These are the necessary step").
:last-of-type | Выбирает последний дочерний элемент указанного типа
Выполняет те же действия, что и :first-of-type, но влияет на последний дочерний элемент того же типа.
.innerDiv p:last-of-type {
color: orangered;
}
Применяется к последнему дочернему innerDiv элемента paragraph типа p.
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
Здесь будет выбран элемент 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.
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
Элемент p Do the same — последний дочерний элемент paragraph внутри innerDiv, поэтому к нему будет применено правило CSS.
:link | Выбирает непосещённую гиперссылку
Этот селектор применяется к ссылкам, которые не были посещены. В основном он используется с элементом anchor a с атрибутом href.
a:link {
color: orangered;
}
<a href="/login">Login<a>
В данном примере все элементы 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;
}
Или:
p[lang|="fr"] {
background: yellow;
}
<p lang="fr">Paragraph 1</p>
:not() | Отрицает следующие выборы (является оператором)
Псевдоселектор отрицания выбирает те элементы, которые не содержат указанный селектор.
Рассмотрим пример:
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>
В данном случае будут выбраны Div 1 и Div 2, поскольку они не являются элементами p.
Заключение
На этом наш список заканчивается. Помимо рассмотренных вариантов существуют и другие псевдоселекторы, однако они не являются стандартными и поэтому не были упомянуты.
Спасибо за внимание!
Перевод статьи Chidume Nnamdi 🔥💻🎵🎮: CSS Pseudo-Classes You Might Have Missed
Комментарии