| Selector | Example | Пример описания |
.class | .intro | Выбирает все элементы с class="intro" |
.class1.class2 | .name1.name2 | Выбирает все элементы с именами name1 и name2 , установленными в атрибуте класса . |
.class1 .class2 | .name1 .name2 | Выбирает все элементы с именем2 , которые являются потомками элемента с именем1 |
#id | #firstname | Выбирает элемент с id="firstname" |
* | * | Выбирает все элементы |
element | p | Выбирает все элементы <p> |
element.class | p.intro | Выбирает все элементы <p> с class="intro" |
element,element | div, p | Выбирает все элементы <div> и все элементы <p> |
element element | div p | Выбирает все элементы <p> внутри элементов <div> |
element>element | div > p | Выбирает все элементы <p>, где родителем является элемент <div> |
element+element | div + p | Выбирает первый элемент <p>, который помещается сразу после элементов <div> |
element1~element2 | p ~ ul | Выбирает каждый элемент <ul>, которому предшествует элемент <p> |
[attribute] | [target] | Выбирает все элементы с целевым атрибутом |
[attribute=value] | [target=_blank] | Выбирает все элементы с target="_blank" |
[attribute~=value] | [title~=flower] | Выбирает все элементы с атрибутом title, содержащим слово «цветок». |
[attribute|=value] | [lang|=en] | Выбирает все элементы со значением атрибута lang, равным "en" или начинающимся с "en-" |
[attribute^=value] | a[href^="https"] | Выбирает каждый элемент <a>, значение атрибута href которого начинается с «https». |
[attribute$=value] | a[href$=".pdf"] | Выбирает каждый элемент <a>, значение атрибута href которого заканчивается на «.pdf». |
[attribute*=value] | a[href*="w3schools"] | Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку "w3schools" |
:active | a:active | Выбирает активную ссылку |
::after | p::after | Вставьте что-нибудь после содержимого каждого элемента <p> |
::before | p::before | Вставьте что-нибудь перед содержимым каждого элемента <p> |
:checked | input:checked | Выбирает каждый проверенный элемент <input> |
:default | input:default | Выбирает элемент <input> по умолчанию |
:disabled | input:disabled | Выбирает каждый отключенный элемент <input> |
:empty | p:empty | Выбирает каждый элемент <p>, у которого нет дочерних элементов (включая текстовые узлы). |
:enabled | input:enabled | Выбирает каждый включенный элемент <input> |
:first-child | p:first-child | Выбирает каждый элемент <p>, который является первым дочерним элементом своего родителя. |
::first-letter | p::first-letter | Выбирает первую букву каждого элемента <p> |
::first-line | p::first-line | Выбирает первую строку каждого элемента <p> |
:first-of-type | p:first-of-type | Выбирает каждый элемент <p>, который является первым элементом <p> своего родителя. |
:focus | input:focus | Выбирает элемент ввода, который имеет фокус |
:fullscreen | :fullscreen | Выбирает элемент, который находится в полноэкранном режиме |
:hover | a:hover | Выбирает ссылки при наведении курсора |
:in-range | input:in-range | Выбирает элементы ввода со значением в указанном диапазоне |
:indeterminate | input:indeterminate | Выбирает входные элементы, которые находятся в неопределенном состоянии |
:invalid | input:invalid | Выбирает все элементы ввода с недопустимым значением |
:lang(language) | p:lang(it) | Выбирает каждый элемент <p> с атрибутом lang, равным «it» (итальянский) |
:last-child | p:last-child | Выбирает каждый элемент <p>, который является последним дочерним элементом своего родителя. |
:last-of-type | p:last-of-type | Выбирает каждый элемент <p>, который является последним элементом <p> своего родителя. |
:link | a:link | Выбирает все непросмотренные ссылки |
::marker | ::marker | Выбирает маркеры элементов списка |
:not(selector) | :not(p) | Выбирает каждый элемент, который не является элементом <p> |
:nth-child(n) | p:nth-child(2) | Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родителя. |
:nth-last-child(n) | p:nth-last-child(2) | Выбирает каждый элемент <p>, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента. |
:nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя, считая от последнего дочернего элемента. |
:nth-of-type(n) | p:nth-of-type(2) | Выбирает каждый элемент <p>, который является вторым элементом <p> своего родителя. |
:only-of-type | p:only-of-type | Выбирает каждый элемент <p>, который является единственным элементом <p> своего родителя. |
:only-child | p:only-child | Выбирает каждый элемент <p>, который является единственным потомком своего родителя |
:optional | input:optional | Выбирает элементы ввода без «обязательного» атрибута |
:out-of-range | input:out-of-range | Выбирает элементы ввода со значением вне указанного диапазона |
::placeholder | input::placeholder | Выбирает элементы ввода с указанным атрибутом «заполнитель». |
:read-only | input:read-only | Выбирает элементы ввода с указанным атрибутом "только для чтения" |
:read-write | input:read-write | Выбирает элементы ввода с НЕ указанным атрибутом "только для чтения" |
:required | input:required | Выбирает элементы ввода с указанным атрибутом «обязательный». |
:root | :root | Выбирает корневой элемент документа |
::selection | ::selection | Выбирает часть элемента, выбранную пользователем |
:target | #news:target | Выбирает текущий активный элемент #news (щелчок по URL-адресу, содержащему это имя привязки) |
:valid | input:valid | Выбирает все элементы ввода с допустимым значением |
:visited | a:visited | Выбирает все посещенные ссылки |
