Псевдоклассы 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.

Заключение

На этом наш список заканчивается. Помимо рассмотренных вариантов существуют и другие псевдоселекторы, однако они не являются стандартными и поэтому не были упомянуты.

Спасибо за внимание!