Загрузка...
* выбрать все элементы.
.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>)
: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)