Виды селекторов

(по тегу, классу, идентификатору, контекстные)

Автор: Старцев Виталий

Виды селекторов

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

Базовые селекторы

1. Селектор по тегу предназначен для выбора всех элементов по имени тега:

   

   Например, всем параграфам нужно сделать внешний отступ снизу в 20 пикселей.

2. Селектор по классу предназначен для выбора элементов по классу (основывается на значении атрибута class):

   

   Например, всем тегам с классом list будет присвоена сплошная граница с размерностью в 4 пикселя красного цвета.

3. Селектор по идентификатору предназначен для выбора элемента по значению атрибута id:

   

   Например, всем тегам с id=“slider” будет присвоен черный цвет.

4. Универсальный селектор (*) предназначен для выбора всех элементов:

   

   Например, базовая конструкция, которая убирает отступы у всех элементов.

Селекторы по атрибуту

Эти селекторы предназначены для выбора элементов по имени атрибута или по атрибуту с указанным значением.

Например, всем тегам с атрибутом name равным telephone мы зададим внутренние отступы в 20 пикселей.

Комбинирование селекторов

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

Пример селектора для выбора элементов, которые имеют одновременно два класса:

Комбинаторные селекторы

Комбинированные селекторы в CSS позволяют создавать более точные и специфические стили для элементов страницы.

Для задания правил нескольким селекторам одновременно их необходимо перечислить через запятую.

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

   

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

   

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

   

4. Селекторы общих предков Селекторы общих предков позволяют выбирать элементы, которые имеют общего предка.

   

Каскадность

CSS расшифровывается как “Cascading Style Sheets”, что означает “каскадные таблицы стилей”. Когда несколько стилей применяются к одному элементу, браузер должен выбрать, какой стиль использовать, применяя правила специфичности, важности и каскадности.

Принципы каскадности:

1. Источник стилей: Стили могут поступать из разных источников:

   • Внешние таблицы стилей (файлы .css).
   • Встроенные стили в HTML (теги <style>).
   • Стили, добавленные непосредственно к элементам через атрибут style (inline стили).
   • Стили по умолчанию, встроенные в браузер.

   Если конфликтуют стили из разных источников, приоритет отдается тому, который ближе к элементу: сначала встроенные стили, потом подключенные файлы стилей, и в последнюю очередь стили по умолчанию.

2. Специфичность Специфичность — это система очков, которая используется браузером для определения важности правил стилей. Чем более специфичным является селектор, тем выше его приоритет.

   1. Типовые правила имеют низкую специфичность.

   

   2. Классы имеют более высокую специфичность.

   

   3. Идентификаторы имеют ещё более высокую специфичность.

   

   4. Встроенные стили имеют самый высокий приоритет среди обычных селекторов, но они уступают важным (!important) стилям.

   

3. !important: Если вы добавляете !important к какому-либо правилу, это правило становится самым приоритетным. Однако злоупотреблять этим инструментом не стоит. Частое использование !important может привести к сложности в управлении кодом, так как оно перекрывает даже высокоспецифичные стили и делает диагностику конфликтов более сложной.

   

4. Порядок подключения: если специфичность одинаковая, то приоритет имеет последнее подключенное правило. Например, если в двух местах определен стиль для одного и того же элемента, то последнее из них будет применено.

   

В данном примере цвет фона будет красным.

Конфликт свойств

Способы решения конфликтов:

• На начальном этапе: лучше пользоваться только классами, т.к. это снижает вероятность загрязнения стилей и обеспечивает изолированность для изучения CSS свойств.
• Увеличить специфичность: можно добавить более специфичный селектор, если нужно, чтобы правило переопределяло другие стили.
• Использовать !important осторожно: это полезно в редких случаях, но злоупотребление может затруднить поддержку кода.
• Правильный порядок подключений: убедитесь, что стили подключены в правильном порядке, чтобы предотвратить ненужные конфликты.

Расчет специфичности

Специфичность в CSS определяется на основе количества различных типов селекторов, которые используются в правиле стилей. Формула расчета специфичности выглядит как “a, b, c, d”, где:

• a — количество inline стилей.
• b — количество селекторов ID.
• c — количество классов, псевдоклассов, атрибутов.
• d — количество селекторов тегов и псевдоэлементов.

Вот табличка, которая поможет рассчитать специфичность:

Пример свойств с расчетом:

Пример расчета:

Для селектора #header .menu a:hover специфичность будет рассчитана как:

• ID: 1 (селектор #header)
• Классы и псевдоклассы: 1 (селектор .menu) + 1 (псевдокласс :hover)
• Теги: 1 (селектор a)

Итоговая специфичность: 0, 1, 2, 1.

Наследуемые и ненаследуемые свойства

Наследование

Наследование в CSS — это действительно суперспособность, и именно оно превращает разработку в удовольствие, если вы принимаете его.

Например, у нас есть такой CSS:

Наряду с другими свойствами, color наследуется, а это значит, что каждый фрагмент текста на странице — если не задан конкретный color — станет red.

Добавим немного HTML:

Если посмотреть демо, то заголовки, параграф и label отображают текст цвета red, но поле ввода (как placeholder, так и value) и кнопка по-прежнему используют цвет текста по умолчанию. Это происходит потому, что им назначены определённые цвета. Что можно увидеть в Инструментах разработчика. Это системные цвета, используемые в таблице стилей пользовательского агента (user agent) — стилях по умолчанию, применяемых браузером. Поскольку к этим элементам применяется значение color, они не наследуют цвет от body, как другие элементы на странице.

Inherit

Не все свойства CSS наследуются, хотя многие из них наследуются. Можно использовать ключевое слово inherit, чтобы наследовать ненаследуемые свойства.

В данном фрагменте h1 получит вычисленное значение display: flex.

Полезные ресурсы

1. Глобальные ключевые слова
2. Плюшки CSS
3. CSS Validator