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