Справочник по CSS

style-rule ::=
    selectors-list {
      properties-list
    }

Где:

selectors-list ::=
    selector[:pseudo-class] [::pseudo-element]
    [, selectors-list]

properties-list ::=
    [property : value] [; properties-list]

См. указатель селекторов, псевдоклассов и псевдоэлементов ниже. Синтаксис каждого указанного значения зависит от типа данных, определенного для каждого указанного свойства.

Примеры правил стилей

strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}

Для вводного уровня ознакомления с синтаксисом селекторов обратитесь к нашему руководству по CSS-селекторам. Учтите, что любая ошибка синтаксиса в определении правила делает всё правило недействительным. Браузер игнорирует недействительные правила. Обратите внимание, что определения правил CSS полностью (ASCII) текстовые, тогда как DOM-CSS / CSSOM (система управления правилами) объектно-ориентированная.

Поскольку структура правил @ сильно варьируется, обратитесь к Правилу @, чтобы найти синтаксис конкретного правила.

Ниже приведены различные селекторы, которые позволяют задавать стили в зависимости от различных характеристик элементов в DOM.

Основные селекторы являются фундаментальными селекторами; это самые базовые селекторы, которые часто комбинируются для создания других, более сложных селекторов.

• Универсальный селектор *
• Селектор типа elementname
• Селектор класса .classname
• Селектор ID #idname
• Селектор атрибута [attr=value]

Список селекторов A, B

Указывает, что оба A и B элемента выбраны. Это метод группировки для выбора нескольких соответствующих элементов.

Комбинаторы — это селекторы, которые устанавливают связь между двумя или более простыми селекторами, например, "A является потомком B" или "A находится рядом с B", создавая сложный селектор.

Комбинатор следующего элемента A + B

Указывает, что элементы, выбранные как A и B, имеют одного родителя и что элемент, выбранный B, сразу следует за элементом, выбранным A, по горизонтали.

Комбинатор последующего элемента A ~ B

Указывает, что элементы, выбранные как A и B, имеют одного родителя и что элемент, выбранный A, предшествует — но не обязательно сразу предшествует — элементу, выбранному B.

Комбинатор потомка A > B

Указывает, что элемент, выбранный B, является прямым потомком элемента, выбранного A.

Комбинатор потомка A B

Указывает, что элемент, выбранный B, является потомком элемента, выбранного A, но не обязательно является прямым потомком.

Комбинатор столбца A || B Экспериментально

Указывает, что элемент, выбранный B , расположен в столбце таблицы, указанном A . Элементы, которые охватывают несколько столбцов, считаются членами всех этих столбцов.

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

Указывает специальное состояние выбранного(ых) элемента(ов).

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

Представляет сущности, которые не включены в HTML.

• Синтаксис CSS
• Правила @
• Каскад
• Комментарии
• Описание
• Наследование
• Сокращенные свойства
• Специфичность
• Синтаксис определения значений
• Единицы и типы значений CSS
• Функциональные обозначения CSS

• Фактическое значение
• Вычисленное значение
• Начальное значение
• Разрешенное значение
• Заданное значение
• Используемое значение

• Контекст форматирования блоков
• Модель блока
• Блок-контейнер
• Режим макета
• Слияние отступов
• Заменяемые элементы
• Контекст стекирования
• Модель визуального форматирования

• Document.styleSheets
• HTMLElement.style
• Element.className
• Element.classList
• StyleSheetList
• CSSRuleList
• CSSRule
• CSSStyleRule
• CSSStyleDeclaration

• CSSStyleSheet.insertRule()
• CSSStyleSheet.deleteRule()

• Расширения CSS Mozilla (с префиксом -moz-)
• Расширения CSS WebKit (в основном с префиксом -webkit-)

• Индексы CSS (w3.org)