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

• * - все элементы
• 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)

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

• :first-letter

• :first-line

• :before

• :after

• ::selection