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

• * - все элементы
• div - тег
• .class - класс
• #id - идентификатор

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

Как работает селектор тегов

Как работает селектор классов

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

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

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

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

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

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

• div + p - первый непосре-                    дственный сосед
• div ~ p - все последующие                  соседи

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

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

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

• [class] - тег содержит данный атрибут
• [class="box"] - конкретное значение атрибута
• [class~="box"] - атрибут содержит данное слово
• [class|="grid"] - значение атрибута начинается с данного слова и после него идет дефис
• [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