CSS Селекторы
CSS Справочник селекторов
В CSS селекторы - это шаблоны, используемые для выбора элементов, которые вы хотите стилизовать.
Используйте наш CSS Тестер Селектора продемонстрировать различные селекторы.
| Селектор | Пример | Описание |
|---|---|---|
| .class | .intro | Выделяет все элементы с class="intro" |
| #id | #firstname | Выделяет все элементы с id="firstname" |
| * | * | Выделяет все элементы |
| элемент | p | Выделить все элементы <p> |
| элемент,элемент | div, p | Выделить все элементы <div> и <p> |
| элемент элемент | div p | Выделить все элементы <p> внутри элементов <div> |
| элемент>элемент | div > p | Выделить все элементы <p> где родителем является элемент <div> |
| элемент+элемент | div + p | Выделить все элементы <p> которые размещаются сразу после элементов <div> |
| элемент1~элемент2 | p ~ ul | Выделить каждый элемент <ul> которые размещаются сразу перед элементом <p> |
| [атрибут] | [target] | Выделяет все элементы с атрибутом target |
| [атрибут=значение] | [target=_blank] | Выделяет все элементы с target="_blank" |
| [атрибут~=значение] | [title~=flower] | Выделяет все элементы с атрибутом title, содержащие слово "flower" |
| [атрибут|=значение] | [lang|=en] | Выделяет все элементы со значением атрибута lang, начиная с "en" |
| [атрибут^=значение] | a[href^="https"] | Выбирает каждый элемент <a>, значение атрибута href который начинается с "https" |
| [attribute$=значение] | a[href$=".pdf"] | Выбирает каждый элемент <a>, значение атрибута href который заканчивается на ".pdf" |
| [атрибут*=значение] | a[href*="schoolsw3"] | Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку "schoolsw3" |
| :active | a:active | Выбор активной ссылки |
| ::after | p::after | Вставляет что-нибудь после содержимого каждого элемента <p> |
| ::before | p::before | Вставить что-то перед содержимым каждого элемента <р> |
| :checked | input:checked | Выбирает каждый проверенный элемент <input> |
| :disabled | input:disabled | Выбрать каждый отключенный элемент lt;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 | Выбирает элемент ввода, имеющего фокус |
| :hover | a:hover | Выделяет ссылки при наведении курсора мыши |
| :in-range | input:in-range | Выделяет входные элементы со значением в заданном диапазоне |
| :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 | Выделяет все непосещенные ссылки |
| :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 | Выбирает элементы ввода без атрибута "required" |
| :out-of-range | input:out-of-range | Выбирает входные элементы со значением вне указанного диапазона |
| :read-only | input:read-only | Выбирает входные элементы с указанным атрибутом "readonly" |
| :read-write | input:read-write | Выбирает входные элементы с не указанным атрибутом "readonly" |
| :required | input:required | Выбирает входные элементы с указанным атрибутом "required" |
| :root | :root | Выбирает корневой элемент документа |
| ::selection | ::selection | Выделяет часть элемента, выбранную пользователем |
| :target | #news:target | Выбирает текущий активный элемент #news (при щелчке по URL, содержащему имя привязки) |
| :valid | input:valid | Выбирает все входные элементы с допустимым значением |
| :visited | a:visited | Выбирает все посещенные ссылки |