Синтаксис CSS

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

Селекторы:

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

div1 .class2 #id3 [href]4 :enabled5

Легенда:
  1. Селектор тега
  2. Селектор класса маркируются точкой
  3. Селектор ID маркируется символом #
  4. Селектор атрибута обрамляется квадратными скобками []
  5. Селектор псевдоклассов маркируются двоеточием

Селекторы, записанные подряд объединяются по логике «И», т.е. для применения стиля должны выполнятся все условия.
Если указано два класса, то стиль применится для элемента, у которого присутствуют оба класса).
Стили, для которых указано два селектора 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 — задает стиль первой строки форматированного текста.
Запись опубликована в CSS. Закладка ссылка.