CSS Селекторы. Справочник
CSS Селекторы
В CSS селекторы - это шаблоны, используемые для выбора элементов, которые вы хотите стилизовать.
Используйте наш Тестер CSS селекторов, чтобы продемонстрировать различные селекторы.
Селектор | Пример | Описание примера |
---|---|---|
.class | .intro | Выбирает все элементы с class="intro" |
.class1.class2 | <div class="name1 name2">...</div> | Выбирает все элементы, для которых в атрибуте class установлены name1 и name2 |
.class1 .class2 | <div class="name1"> <div class="name2"> ... </div> </div> |
Выбирает все элементы с name2 который является потомком элемента с name1 |
#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] | Выбирает все элементы с атрибутом target |
[attribute=value] | [target=_blank] | Выбирает все элементы с target="_blank" |
[attribute~=value] | [title~=flower] | Выбирает все элементы с атрибутом title, содержащим слово "flower" |
[attribute|=value] | [lang|=en] | Выбирает все элементы со значением атрибута lang, начинающимся с "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 | Выбирает элемент input, который имеет фокус |
:hover | a:hover | Выбирает ссылки при наведении мыши |
:in-range | input:in-range | Выбирает элементы input со значением в указанном диапазоне |
:indeterminate | input:indeterminate | Выбирает элементы input, которые находятся в неопределенном состоянии |
:invalid | input:invalid | Выбирает все input элементы с недопустимым значением |
: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 | Выбирает все не посещенные ссылки |
: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 | Выбирает элементы input без "обязательного" атрибута |
:out-of-range | input:out-of-range | Выбирает элементы input со значением за пределами указанного диапазона |
::placeholder | input::placeholder | Выбирает элементы input с заполнителем текста |
:read-only | input:read-only | Выбирает элементы input с указанным атрибутом "readonly" (только для чтения) |
:read-write | input:read-write | Выбирает элементы input с атрибутом "readonly", который НЕ указан |
:required | input:required | Выбирает элементы input с указанным атрибутом "required" |
:root | :root | Выбирает root (корневой) элемент документа |
::selection | ::selection | Выбирает часть элемента, которая выбрана пользователем |
:target | #news:target | Выбирает текущий активный элемент #news (клик на URL, содержащий это имя якоря) |
:valid | input:valid | Выбирает все входные элементы с допустимым значением |
:visited | a:visited | Выбирает все посещенные ссылки |