Список CSS-селекторов

Список CSS-селекторов

* выбрать все элементы.

.className выбрать все элементы с class=”className”

#elementId выбрать все элементы с id=”elementId”

p выбрать все элементы <p>

p, div выбрать все элементы <p> и <div>

div p выбрать все элементы <p>, которые внутри <div>

div > p выбрать все элементы <p>, которые являются потомками по отношению к <div>, в обратную сторону p > div тоже работает.

div + p выбрать элемент <p>, который следует сразу после <div>

div ~ p выбрать все элементы <p>, которые следуют после <div>

[title] выбрать все элементы, у которых есть атрибут title

[title=myTitle] выбрать все элементы, у которых есть атрибут title со значением “myTitle”

[title~=myTitle] выбрать все элементы, у которых в значении атрибута title встречается отдельное слово “myTitle”

[title|=myTitle] выбрать все элементы, у которых значение атрибута title точно равно “myTitle” или начинается с “myTitle-” (“-” U+002D)

[title^=myTitle] выбрать все элементы, у которых значение атрибута title начинается с “myTitle”

[title$=myTitle] выбрать все элементы, у которых значение атрибута title оканчивается “myTitle”

[title*=myTitle] выбрать все элементы, у которых в значении атрибута title встречается “myTitle” (и совершенно не обязательно отдельным словом)

Псевдо-классы

:hover элементы, которые находятся в состоянии наведения (обычно курсора)

:link ссылки с атрибутом href (без href не считается)

:vizited ссылки с href, которые уже посещались

:active элемент в состоянии active (кликнут)

:focus элемент, на котором установлен фокус

:checked элемент в состоянии checked (если оно у него бывает)

:required обязательный для заполнения элемент (обычно поля форм)

:invalid любые <input> или <form> элементы, контент которых не проходит валидацию, в соответствии с типом поля

:in-range элементы, значение которых соответствует указанному для них диапазону ограничений (применяется только к элементам с заданным диапазоном ограничений min и max)

:optional необязательный элемент без атрибута required

:disabled элемент в отключенном состоянии (его нельзя выбрать, нажать на него или ввести текст)

:enabled элемент во включенном состоянии (его можно выбрать, нажать на него или ввести текст)

:indeterminate элементы формы в неопределенном состоянии

:read-only элементы, недоступные для редактирования пользователем

:read-write элементы, доступные для редактирования пользователем (обычно текстовые поля формы)

:first-child первый элемент потомок своего родителя

:nth-child(even) или :nth-child(2n) все чётные потомки родителя

:nth-child(odd) или :nth-child(2n+1) все нечётные элементы-потомки родителя

:nth-child(5) только пятый потомок родителя (:nth-child(1) только первый, как и :first-child)

:nth-child(5n) каждый пятый (5, 10, 15, и т. д) элемент-потомок родителя

:nth-child(-n + 5) только первые пять элементов

:only-child любой элемент, являющийся единственным потомком родителя

:first-of-type находит первого потомка своего типа (тега) среди деток элемента-родителя (напр. первый <p> среди <div> и <p>)

:nth-of-type(ZZZ) значения ZZZ аналогичны :nth-child, но применяются только к заданному тегу и не учитывает при вычислении позиции другие теги того же уровня

:only-of-type находит единственного потомка своего типа среди деток элемента-родителя (напр. единственный <p> среди <div>)

css селекторы

:empty любой пустой элемент, в котором нет ни текста, ни других элементов

:not(.notClass) элементы, кроме элементов с css-классом “notClass”

:target элемент, у которого значение атрибута id соответствует хэшу из url страницы (элемент с id=”myid”, когда в url страницы #myid)

:placeholder-shown помогает определить, виден ли placeholder (когда в поле нет значения) или скрыт (когда значение поля не пустое)

Псевдо-элементы

::before или :before псевдо-элемент, первый, в начале контейнера (можно добавить текстовое содержимое с помощью свойства content: 'ZZZ')

::after или :after псевдо-элемент, аналогичный :before, но последний, в конце контейнера

::first-letter первая буква

::first-line первая строка

::selection применяет стили к выделенному фрагменту

::placeholder применяет стили к значению placeholder полей формы (для input, textarea)