Селекторы, псевдоклассы и псевдоэлементы

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

Селекторы

СелекторПримерОписание примераChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
.class.testВыбирает все элементы с классом test (class = "test"). ДаДаДаДаДаДа
#id#testВыбирает все элементы с id = "test". ДаДаДаДаДаДа
** Выбирает все элементы (универсальный селектор). Селектор также может выбрать все элементы внутри другого элемента. 4.02.09.63.17.012.0
elementh2 Выбирает все заголовки второго уровня - <h2>. ДаДаДаДаДаДа
selector,selectorh2, h3 Выбирает все элементы <h2> и <h3>. ДаДаДаДаДаДа
selector selectorh2 i Выбирает все элементы <i> внутри элементов <h2>. ДаДаДаДаДаДа
selector > selectorp > a Выбирает все дочерние элементы <a>, у которых родитель - элемент <p>. ДаДаДаДа7.012.0
selector + selectorh2 + p Выбирает все элементы <p>, которые расположены сразу же после элементов <h2>. ДаДаДаДа7.012.0
selector ~ selectorcss3h2 ~ p Выбирает все элементы <p>, которые следуют сразу же за элементом <h2>, а также все элементы <p>, которые находятся на одном уровне вложенности. 4.03.59.63.27.012.0
[attribute][title] Выбирает все элементы с атрибутом title. 4.02.09.63.17.012.0
[attribute = value][type=password] Выбирает все элементы с атрибутом type и значением "password" 4.02.09.63.17.012.0
[attribute=value][attribute2=value2][src='logo.png'][alt='image'] Выбирает все элементы, которые имеют указанные атрибуты (src и alt) со значениями этих атрибутов logo.png для первого и image для второго. 4.02.09.63.17.012.0
[attribute ~ = value][title ~ = home] Выбирает все элементы с атрибутом title, который содержит слово "home". 4.02.09.63.17.012.0
[attribute|= value][title | = home] Выбор всех элементов с атрибутом title, значение которого начинается с "home". 4.02.09.63.17.012.0
[attribute^=value>]css3a[href ^ = "http"] Выбирает каждый элемент <a>, содержащий атрибут href, значение которого начинается с "http". 4.03.59.63.27.012.0
[attribute$=value]css3a[href$= ".mp3"] Выбирает каждый элемент <a>, значение атрибута href которого заканчивается на ".mp3". 4.03.59.63.27.012.0
[attribute*=value]css3[title*="home"] Выбор всех элементов с атрибутом title, в значение которого содержится "home". 4.03.59.63.27.012.0

Псевдоэлементы

ПсевдоклассПримерОписаниеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
::afterp::after Добавляет содержимое после каждого элемента <p>. 4.03.57.0*3.19.0*12.0
::beforep::before Добавляет содержимое перед каждым элементом <p>. 4.03.57.0*3.19.0*12.0
::first-letterp::first-letter Позволяет создавать инициал (буквицу) — стилизовать начальный символ каждого элемента <p>. 1.01.07.0*1.09.0*12.0
::first-linep::first-line Позволяет стилизовать первую строку каждого элемента <p>, которая будет отличаться от основного текста. 1.01.07.0*1.09.0*12.0
::selection::selection Позволяет добавлять тень к тексту, управлять цветом фона и цветом текста, выделенного пользователем 4.02.0
-moz-
10.13.19.012.0

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

ПсевдоэлементПримерОписаниеChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
:activea:active Применяет стиль к активной ссылке. 4.02.09.63.17.012.0
:checkedcss3input:checked Применяется к элементам <input> (выбранные элементы type = "radio" или type = "checkbox") 4.03.59.63.29.012.0
:disabledcss3input:disabled Выбирает каждый отключенный элемент <input>. 4.03.59.63.29.012.0
:emptycss3div:empty Выбирает каждый элемент <div>, который не содержит дочерних элементов (включая текст/ пробелы). 4.03.59.63.29.012.0
:enabledcss3input:enabled Применяется для выбора каждого элемента <input>, который не отключен. 4.03.59.63.29.012.0
:first-childh2:first-child Выбирает любой тег <h2>, который является первым дочерним тегом своего родителя. 4.03.09.63.17.012.0
:first-of-typecss3p:first-of-type Выбор каждого элемента <p>, который является первым из элементов своего родительского элемента. 4.03.59.63.29.012.0
:focusinput:focus Стилизует элемент <input>, который находится в фокусе. 4.02.09.63.18.012.0
:hovera:hover Стилизует ссылку (элемент <a>) при наведении указателя мыши. 4.02.09.63.17.012.0
:in-rangecss3input:in-range Выбирает все элементы <input> со значением в указанном диапазоне. 10.028.011.05.2Нет13.0
:invalidcss3input:invalid Выбирает все элементы <input> в которых значение указано некорректно (не соответствует типу входных данных). 10.04.010.05.010.012.0
:lang(код языка)p:lang(es) Выбирает каждый элемент <p>, атрибут lang которого, содержит значение "es" (Español) 4.02.09.63.18.012.0
:last-childcss3h2:last-child Выбирает любой тег <h2>, который являются первым дочерним тегом своего родителя. 4.03.59.63.29.012.0
:last-of-typecss3p:last-of-type Выбор каждого элемента <p>, который является последним из элементов своего родительского элемента. 4.03.59.63.29.012.0
:linka:link Задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). 4.02.09.63.17.012.0
:not(селектор)css3:not(h2) Задаёт стиль всем элементам, которые не являются элементом <h2> 4.03.59.63.29.012.0
:nth-child(n)css3tr:nth-child(2) Выбирает каждый элемент <tr>, который является вторым дочерним элементом своего родительского элемента. 4.03.59.63.29.012.0
:nth-last-child(n)css3p:nth-last-child(2) Выбирает каждый элемент <li>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). 4.03.59.63.29.012.0
:nth-last-of-type(n)css3p:nth-last-of-type(2) Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родительского элемента (считая от последнего дочернего элемента). 4.03.59.63.29.012.0
:nth-of-type(n)css3img:nth-of-type(2) Выбор каждого элемента <img>, который является вторым дочерним элементом своего родительского элемента. 4.03.59.63.29.012.0
:only-childcss3p:only-child Выбор каждого элемента <p>, который является единственным дочерним элементом своего родительского элемента (нет других элементов). 4.03.59.63.29.012.0
:only-of-typecss3p:only-of-type Выбор каждого элемента <p>, который является единственным элементом <p> своего родительского элемента (нет других элементов <p>). 4.03.59.63.29.012.0
:optionalcss3input:optional Выбирает все элементы <input>, у которых не задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). 10.04.010.05.010.012.0
:out-of-rangecss3input:out-of-range Выбирает все элементы <input>, которые находятся за пределами указанного диапазона (атрибуты min и max). 10.028.011.05.2Нет13.0
:read-onlycss3input:read-only Выбирает все элементы <input> для которых указан атрибут readonly (только для чтения). Да -moz-ДаДаНет13.0
:read-writecss3input:read-write Выбирает все элементы <input> для которых не указан атрибут readonly (только для чтения). Да -moz-ДаДаНет13.0
:requiredcss3input:required Выбирает все элементы <input>, у которых задан атрибут required (который указывает, что пользователь обязательно должен выбрать/добавить значение перед отправкой формы). 10.04.010.05.010.012.0
:rootcss3:root Определяет корневой элемент документа. 4.03.59.63.29.012.0
:targetcss3:target Стилизует целевой элемент на странице (на который был произведён переход по якорной ссылке). 4.03.59.63.29.012.0
:validcss3input:valid Выбирает все элементы <input> в которых значение указано корректно (соответствует типу входных данных). 10.04.010.05.010.012.0
:visiteda:visited Задаёт стиль всем ссылкам, по которым пользователь произвёл переход (посещенные ссылки). 4.02.09.63.17.012.0