Селекторы, псевдоклассы и псевдоэлементы
В этом разделе представлено описание всех возможных способов для выбора необходимого элемента, или нескольких элементов в документе с использованием нативных средств каскадных таблиц стилей CSS.
Селекторы
| Селектор | Пример | Описание примера |  Chrome |  Firefox |  Opera |  Safari |  IExplorer |  Edge |
|---|---|---|---|---|---|---|---|---|
| .class | .test | Выбирает все элементы с классом test (class = "test"). | Да | Да | Да | Да | Да | Да |
| #id | #test | Выбирает все элементы с id = "test". | Да | Да | Да | Да | Да | Да |
| * | * | Выбирает все элементы (универсальный селектор). Селектор также может выбрать все элементы внутри другого элемента. | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| element | h2 | Выбирает все заголовки второго уровня - <h2>. | Да | Да | Да | Да | Да | Да |
| selector,selector | h2, h3 | Выбирает все элементы <h2> и <h3>. | Да | Да | Да | Да | Да | Да |
| selector selector | h2 i | Выбирает все элементы <i> внутри элементов <h2>. | Да | Да | Да | Да | Да | Да |
| selector > selector | p > a | Выбирает все дочерние элементы <a>, у которых родитель - элемент <p>. | Да | Да | Да | Да | 7.0 | 12.0 |
| selector + selector | h2 + p | Выбирает все элементы <p>, которые расположены сразу же после элементов <h2>. | Да | Да | Да | Да | 7.0 | 12.0 |
selector ~ selector | h2 ~ p | Выбирает все элементы <p>, которые следуют сразу же за элементом <h2>, а также все элементы <p>, которые находятся на одном уровне вложенности. | 4.0 | 3.5 | 9.6 | 3.2 | 7.0 | 12.0 |
| [attribute] | [title] | Выбирает все элементы с атрибутом title. | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| [attribute = value] | [type=password] | Выбирает все элементы с атрибутом type и значением "password" | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| [attribute=value][attribute2=value2] | [src='logo.png'][alt='image'] | Выбирает все элементы, которые имеют указанные атрибуты (src и alt) со значениями этих атрибутов logo.png для первого и image для второго. | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| [attribute ~ = value] | [title ~ = home] | Выбирает все элементы с атрибутом title, который содержит слово "home". | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| [attribute|= value] | [title | = home] | Выбор всех элементов с атрибутом title, значение которого начинается с "home". | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| [attribute^=value>] | a[href ^ = "http"] | Выбирает каждый элемент <a>, содержащий атрибут href, значение которого начинается с "http". | 4.0 | 3.5 | 9.6 | 3.2 | 7.0 | 12.0 |
| [attribute$=value] | a[href$= ".mp3"] | Выбирает каждый элемент <a>, значение атрибута href которого заканчивается на ".mp3". | 4.0 | 3.5 | 9.6 | 3.2 | 7.0 | 12.0 |
| [attribute*=value] | [title*="home"] | Выбор всех элементов с атрибутом title, в значение которого содержится "home". | 4.0 | 3.5 | 9.6 | 3.2 | 7.0 | 12.0 |
Псевдоэлементы
| Псевдокласс | Пример | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|---|---|
| ::after | p::after | Добавляет содержимое после каждого элемента <p>. | 4.0 | 3.5 | 7.0* | 3.1 | 9.0* | 12.0 |
| ::before | p::before | Добавляет содержимое перед каждым элементом <p>. | 4.0 | 3.5 | 7.0* | 3.1 | 9.0* | 12.0 |
| ::first-letter | p::first-letter | Позволяет создавать инициал (буквицу) — стилизовать начальный символ каждого элемента <p>. | 1.0 | 1.0 | 7.0* | 1.0 | 9.0* | 12.0 |
| ::first-line | p::first-line | Позволяет стилизовать первую строку каждого элемента <p>, которая будет отличаться от основного текста. | 1.0 | 1.0 | 7.0* | 1.0 | 9.0* | 12.0 |
| ::selection | ::selection | Позволяет добавлять тень к тексту, управлять цветом фона и цветом текста, выделенного пользователем | 4.0 | 2.0 -moz- | 10.1 | 3.1 | 9.0 | 12.0 |
Псевдоклассы
| Псевдоэлемент | Пример | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|---|---|
| :active | a:active | Применяет стиль к активной ссылке. | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| :checked | input:checked | Применяется к элементам <input> (выбранные элементы type = "radio" или type = "checkbox") | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :disabled | input:disabled | Выбирает каждый отключенный элемент <input>. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :empty | div:empty | Выбирает каждый элемент <div>, который не содержит дочерних элементов (включая текст/ пробелы). | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :enabled | input:enabled | Применяется для выбора каждого элемента <input>, который не отключен. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :first-child | h2:first-child | Выбирает любой тег <h2>, который является первым дочерним тегом своего родителя. | 4.0 | 3.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| :first-of-type | p:first-of-type | Выбор каждого элемента <p>, который является первым из элементов своего родительского элемента. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :focus | input:focus | Стилизует элемент <input>, который находится в фокусе. | 4.0 | 2.0 | 9.6 | 3.1 | 8.0 | 12.0 |
| :hover | a:hover | Стилизует ссылку (элемент <a>) при наведении указателя мыши. | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| :in-range | input:in-range | Выбирает все элементы <input> со значением в указанном диапазоне. | 10.0 | 28.0 | 11.0 | 5.2 | Нет | 13.0 |
| :invalid | input:invalid | Выбирает все элементы <input> в которых значение указано некорректно (не соответствует типу входных данных). | 10.0 | 4.0 | 10.0 | 5.0 | 10.0 | 12.0 |
| :lang(код языка) | p:lang(es) | Выбирает каждый элемент <p>, атрибут lang которого, содержит значение "es" (Español) | 4.0 | 2.0 | 9.6 | 3.1 | 8.0 | 12.0 |
| :last-child | h2:last-child | Выбирает любой тег <h2>, который является последним дочерним элементом своего родителя. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :last-of-type | p:last-of-type | Выбор каждого элемента <p>, который является последним из элементов своего родительского элемента. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :link | a:link | Задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |
| :not(селектор) | :not(h2) | Задаёт стиль всем элементам, которые не являются элементом <h2> | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :nth-child(n) | tr:nth-child(2) | Выбирает каждый элемент <tr>, который является вторым дочерним элементом своего родительского элемента. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :nth-last-child(n) | p:nth-last-child(2) | Выбирает каждый элемент <li>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :nth-of-type(n) | img:nth-of-type(2) | Выбор каждого элемента <img>, который является вторым дочерним элементом своего родительского элемента. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :only-child | p:only-child | Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента (нет других элементов). | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :only-of-type | p:only-of-type | Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента (нет других элементов <p>). | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :optional | input:optional | Выбирает все элементы <input>, у которых не задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). | 10.0 | 4.0 | 10.0 | 5.0 | 10.0 | 12.0 |
| :out-of-range | input:out-of-range | Выбирает все элементы <input>, которые находятся за пределами указанного диапазона (атрибуты min и max). | 10.0 | 28.0 | 11.0 | 5.2 | Нет | 13.0 |
| :read-only | input:read-only | Выбирает все элементы <input> для которых указан атрибут readonly (только для чтения). | Да | -moz- | Да | Да | Нет | 13.0 |
| :read-write | input:read-write | Выбирает все элементы <input> для которых не указан атрибут readonly (только для чтения). | Да | -moz- | Да | Да | Нет | 13.0 |
| :required | input:required | Выбирает все элементы <input>, у которых задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). | 10.0 | 4.0 | 10.0 | 5.0 | 10.0 | 12.0 |
| :root | :root | Определяет корневой элемент документа. | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :target | :target | Стилизует целевой элемент на странице (на который был произведён переход по якорной ссылке). | 4.0 | 3.5 | 9.6 | 3.2 | 9.0 | 12.0 |
| :valid | input:valid | Выбирает все элементы <input> в которых значение указано корректно (соответствует типу входных данных). | 10.0 | 4.0 | 10.0 | 5.0 | 10.0 | 12.0 |
| :visited | a:visited | Задаёт стиль всем ссылкам, по которым пользователь произвёл переход (посещенные ссылки). | 4.0 | 2.0 | 9.6 | 3.1 | 7.0 | 12.0 |