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 | Выбирает все посещенные ссылки |
