селектор_1,
селектор_2,
селектор_3 {
свойство_1: значение;
свойство_2: значение
}
Селекторы:
Селекторы можно представить в виде такой схемы:
div .class #id [href] :enabled
Легенда:- Селектор тега
- Селектор класса маркируются точкой
- Селектор 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 — задает стиль первой строки форматированного текста.