Основные селекторы:
* – все элементы, div * — все дочерние элементы
h1 – по тегу
#id — по id
.class — по классу
.class1.class2 – одновременно с двумя классами
p strong — вложенные
ul > li — только первого уровня вложенности
div + p — соседние, первый абзац следующий за div
div ~ p — родственные, все абзацы следующие за div
Псевдоклассы:
:first-child – первый потомок своего родителя
:last-child – последний потомок
:only-child – единственный потомок, соседних элементов нет
:nth-child(a) – потомок номер # своего родителя, например :nth-child(2) – второй потомок. Нумерация начинается с 1. 2n — каждый второй, odd — нечетные, even — четные.
:nth-child(2n+3) – каждый второй потомок, начиная с 3-го
Следующие псевдоклассы аналогичны предыдущим, но выбирают потомков с учетом типа:
:first-of-type
:last-of-type
:only-of-type
:nth-of-type
:nth-last-of-type
Пример:
<div>
<span>Some different element</span>
<ul><li>1</li></ul>
<ul><li>2</li></ul>
<ul><li>3</li></ul>
</div>
...
ul:first-of-type {}
:not(селектор) – все, кроме подходящих под селектор
:empty – пустой, не содержит вложенных элементов (даже текста)
:checked, :disabled, :enabled – состояния полей ввода
:focus – ссылка или поле ввода в фокусе
:link — не посещенная ссылка
:visited — посещенная ссылка
:active — активная ссылка
:hover – элемент под курсором мыши
:target – сработает для элемента, ID которого совпадает с анкором #id в URL
:disabled — заблокированные элементы (установлен атрибут disabled)
:enabled — не заблокированные элементы (не установлен disabled)
:read-only — выберет все поля доступные только для чтения (аналог input[readonly])
:read-write — выберет все поля доступные для редактирования (аналог input:not([readonly]))
:required — выберет все объязательные поля (с атрибутом required)
:optional — выберет поля у которых не указан атрибут required
:checked — выбрть отмеченные поля checkbox или radio (не отмеченные можно выбрать через input:not(:checked))
:valid — выберет элементы, у которых введенно верное значение
:invalid — выберет элементы, у которых введенно не верное значение
:in-range — выбирает все элементы, значение которых попадает в диапазон max и min
:out-of-range — выбирает все элементы, значение которых не попадает в диапазон max и min
Псевдоэлементы:
::before — добавляет содержимое в начало элемента
::after — добавляет содержимое в конец элемента
::first-line — задает стиль первой строки форматированного текста
::first-letter — определяет стиль первого символа в тексте элемента
Селекторы атрибутов:
[checked] – присутствует атрибут
[attr="value"] – атрибут равен “value”
[attr^="http"] – атрибут начинается с текста
[attr$=".com"] – атрибут заканчивается на текст
[attr|="value"] – атрибут равен “value” или начинается с “value-” (например равен “value-1”)
[attr*="valut"] – атрибут содержит подстроку “value” (например равен “myvalue”)
[attr~="bar"]– атрибут содержит “bar” как одно из значений через пробел, например: data-attr='foo bar'