CSS Selector Справочник
Селекторы CSS
В CSS селекторы являются шаблонами, используемыми для выбора элементов, которые требуется присвоить стилю.
Используйте наш тестер селектора CSS для демонстрации различных селекторов.
| Селектор | Пример | Пример описания |
|---|---|---|
| .class | .intro | Выбор всех элементов с class="intro" |
| #id | #firstname | Выбор элемента с id="firstname" |
| * | * | Выбор всех элементов |
| element | p | Выбор всех элементов <p> |
| 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, содержащим слово "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*="html5css.dev"] | Выбирает каждый элемент <a>, значение атрибута href которого содержит подстроку "html5css.dev" |
| :active | a:active | Выбор активной ссылки |
| ::after | p::after | Вставка чего-либо после содержимого каждого элемента < p > |
| ::before | p::before | Вставка чего-либо перед содержимым каждого элемента <p> |
| :checked | input:checked | Выбор каждого отмеченного <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 | Выбор элемента ввода, имеющего фокус |
| :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 | Выбор входных элементов без атрибута "обязательный" |
| :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 | Выбор всех посещенных ссылок |