Основные селекторы

* - все элементы

div - тег

.class - класс

#id - идентификатор

Селекторы потомков/детей

div p - все потомки

div > p - все дети

Селектор соседей

div + p - первый непосредственный сосед

div ~ p - все последующие соседи

Селекторы по атрибут

• [class] - тег содержит данный атрибут
• [class="box"] - конкретное значение атрибута
• [class~="box"] - атрибут содержит данное слово
• [class^="box"] - значение атрибута начинается с данной последовательности символов
• [href$=".pdf"] - значение атрибута заканчивается на данную последовательность символов
• [class*="box"] - значение атрибута содержит данную последовательность символов

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

• :link
• :hover
• :active
• :visited

• :focus
• :enabled
• :disabled
• :checked

• :first-child
• :last-child
• :only-child

• :first-of-type
• :last-of-type
• :only-of-type

• :nth-child(n)
• :nth-last-child(n)
• :nth-of-type(n)
• :nth-last-of-type(n)

• :target
• :empty
• :not(.awesome)

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

• :first-letter

• :first-line

• :before

• :after

• ::selection