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

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

div - тег

.class - класс

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

Как работает *

Как работает селектор по тегам

Как работает селектор по классам

Как работает селектор по идентификатору

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

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

div > p - все дети

Селектор потомков

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

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

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

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

Селектор первого соседа 
div + p

Селектор следующих соседей
div ~ p

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

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

Селектор атрибута
[attribute-name]

Селектор с конкретным значением атрибута [class="paragraph"]

Атрибут содержит определенное слово

[class~="first"]

Первые символы атрибута 
[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)

: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(selector)

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

• :first-letter

• :first-line

• :before

• :after

• ::selection

:first-letter, :first-line

:before, :after

::selection