Синтаксис CSS — Parsing RusProfile

селектор_1,
селектор_2,
селектор_3 {
  свойство_1: значение;
  свойство_2: значение
}

Селекторы:

Селекторы можно представить в виде такой схемы:

div1 .class2 #id3 [href]4 :enabled5

Легенда:

Селектор тега
Селектор класса маркируются точкой
Селектор ID маркируется символом #
Селектор атрибута обрамляется квадратными скобками []
Селектор псевдоклассов маркируются двоеточием

Селекторы, записанные подряд объединяются по логике «И», т.е. для применения стиля должны выполнятся все условия.
Если указано два класса, то стиль применится для элемента, у которого присутствуют оба класса).
Стили, для которых указано два селектора ID работать не будут, т.к. у элемента может быть только один ID.

Селекторы, указанные через запятую объединяются по логике «ИЛИ».

Отношения элементов

div ul — все ul, которые вложены в div-ы
div + div — второй элемент div на одном уровне
div ~ div — все элементы div, начиная со второго, на одном уровне
input:checked ~ input:not(:checked ) — все невыбранные чекбоксы, идущие после выбранного.

Универсальные селекторы

Чтобы задать стиль для всех элементов страницы указывается селектор *. Для применения стилей ко всем элементам с определенным классом или ID, можно просто указать этот класс или ID без тега и селектора *. Пример:

* {} - абсолютно все элементы
*.red {} - все элементы с классом red
.red {} - все элементы с классом red (* можно опускать)

Динамические псевдоклассы

a:link — все ссылки
a:active — ссылка, на которую нажали
a:hover — ссылки, на которую навели мышь
a:focus — перешли на ссылку с помощью клавиатуры
a:visited — ссылка, которую посетили
:enabled — доступные элементы
:disnabled — недоступные/отключенные элементы
:checked — элементы интерфейса (checkbox и radio), когда они находятся в положение «включено».
:indeterminate — элементы интерфейса (checkbox и radio), когда они находятся в неопределенном состоянии
:read-only — Применяется к полям формы, у которых задан атрибут readonly
:valid — Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу.

Структурные псевдоклассы

:root — определяет корневой элемент документа (<html>).
:first-child/:last-child — первый/последний дочерний элемент своего родителя.
:nth-child/:nth-last-child — n-й дочерний элемент с начала или конца
:nth-of-type/:nth-last-of-type — как предыдущий, но с группировкой по типу. Тип указывается до селектора. Если тип не указан, то условие применится ко всем тегам документа
:only-child — применяется к дочернему элементу, только если он единственный у родителя
:only-of-type — применяется к дочернему элементу указанного типа, только если он единственный у родителя
:empty — представляет пустые элементы (пробел считается за содержимое)

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

::before — применяется для отображения желаемого контента до содержимого элемента, к которому он добавляется
::after — используется для вывода желаемого текста после содержимого элемента, к которому он добавляется
::first-letter — определяет стиль первого символа в тексте элемента, к которому добавляется.
::first-line — задает стиль первой строки форматированного текста.