CSS-селекторы: что это такое
При разработке веб-сайтов код принято организовывать в разных файлах, каждый из которых выполняет свою функцию. Первый файл, HTML, отвечает за разметку. Второй, CSS, определяет внешний вид страницы. Однако если просто записать код в CSS-файле, HTML-элемент не изменится — стили не сработают. Файлам нужен механизм взаимодействий, чтобы обращаться друг к другу. Такой механизм называется селектором.
Представьте цех, в котором шьют рубашки. Сначала создается стан, рукава, воротник, карманы. Только после этого пришивают пуговицы.
Рубашка — это HTML-элементы страницы. Пуговицы — CSS-стили. А вот нитки, которыми их пришивают, — это и есть CSS-селекторы.
Селектор удобно представлять в виде виртуального указателя для браузера. Этот указатель выходит из CSS-файла и связывается с элементом разметки, которому заданы определенные стили. Селектор позволяет обращаться точечно к какому-то конкретному элементу, к целой группе или всей HTML-разметке одновременно.
Допустим, вам нравится зеленый цвет. С помощью разных селекторов вы по своему усмотрению можете покрасить в зеленый одно слово, предложение, абзац, раздел или весь текст в документе. То же с другими стилями: вы можете без ограничений применять их так, как вам будет нужно.
Разновидности селекторов
CSS-селекторы делятся на несколько видов: универсальный селектор, селектор типов, селектор классов, селектор по ID, групповой селектор и селектор атрибутов.
Универсальный селектор
Универсальный селектор позволяет обращаться сразу ко всем элементам HTML-документа. Например, можно сделать одинаковый шрифт для параграфов, заголовков, цитат и прочего текста на странице. Чтобы воспользоваться универсальным селектором, нужно написать символ звездочки * в CSS-файле.
Селектор типов
Селектор типов позволяет обращаться к элементам HTML-документа по названию тега. Например, для стилизации заголовка в CSS-файле необходимо написать h1.
Селектор классов
Селектор классов дает возможность обращаться к тегам, у которых в качестве атрибута использован класс с одинаковым именем. Возьмем страницу с пятью параграфами. Добавим трем параграфам атрибут — класс с именем "text__color". Можно перейти в CSS-файл и стилизовать все отмеченные параграфы.
Для обращения к селектору классов ставим точку и указываем название класса.
Селектор по ID
Селектор по ID позволяет стилизовать HTML-теги по имени уникального идентификатора, который задан в качестве атрибута. В отличие от селектора классов, уникальный идентификатор на странице, как правило, только один.
Для обращения к селектору по ID нужно поставить решетку и написать имя ID.
Групповой селектор
Групповой селектор позволяет задавать общие CSS-правила селекторам разных видов. Предположим, нам нужен один и тот же фоновый цвет для трех элементов:
для заголовка с классом, для абзаца с ID и одного обычного абзаца. Требуется применить CSS-правила к селектору классов, селектору по ID и селектору типов. Мы можем перечислить нужные селекторы через запятую и не дублировать код.
CSS-селекторы по атрибуту
Селектор по атрибуту позволяет задать стили для тегов по имени и значению их атрибутов. Представьте сайт с несколькими формами для ввода данных. У каждой есть поле для текста, почты и пароля. Если мы укажем имя и значение атрибута для поля почты, стили применятся для всех полей почты на сайте.
Для выбора селектора по атрибуту нужно в квадратных скобках указать название и значение необходимого атрибута. Иногда в квадратных скобках дописывают букву i — это означает, что нужно стилизовать атрибут, не учитывая регистр (name и Name будут восприниматься как одинаковое значение).
Выбор элементов по отношению и расположению
Представьте страницу с несколькими списками. Нам нужно стилизовать каждый пункт. Для этого подходит комбинатор — способ стилизации HTML-элементов по их расположению на странице или отношению к другим элементам.
Комбинатор позволяет сделать так, что браузер выберет все пункты на странице без учета того, в каком списке они находятся. Так не придется дублировать код.
Комбинации бывают четырех типов: комбинаторы потомков, комбинаторы прямых потомков, соседнего родства и комбинаторы общего родства.
Комбинатор потомков
Комбинатор потомков записывается через пробел по такой схеме:
- указываем первый элемент — родительский;
- ставим пробел;
- указываем второй элемент — дочерний.
Стили затронут все дочерние элементы независимо от их уровня вложенности.
Комбинатор прямых потомков
Комбинатор прямых потомков записывается через знак «больше»:
- указываем первый родительский элемент;
- ставим знак «больше»;
- указываем дочерний элемент.
Стили применятся к дочерним элементам на первом уровне вложенности. Начиная со второго уровня вложенности заданные стили работать не будут.
Комбинатор соседнего родства
Комбинатор соседнего родства записывается через знак «плюс»:
- указываем первый элемент, вложенность не учитываем;
- ставим знак «плюс»;
- указываем второй элемент — любой, который находится на одном уровне иерархии с первым элементом.
Такой комбинированный селектор стилизует второй указанный элемент.
Комбинатор общего родства
Комбинатор общего родства записывается через знак «тильда»:
- указываем первый элемент;
- ставим знак «тильда»;
- указываем второй элемент, который должен идти после первого и находится с ним на одном уровне иерархии.
Стили затронут второй и все последующие за ним элементы с общим родителем.
Псевдоклассы и псевдоэлементы
Псевдоклассы и псевдоэлементы — это набор ключевых слов, которые называют псевдоселекторами. Их можно считать видом селекторов, которые вместе с обычными отвечают за стилизацию элементов на странице.
Псевдоселекторы привносят на страницу интерактивность, могут стилизовать разметку по частям или добавлять новые элементы, которых нет в HTML-файле.
Псевдоклассы
Псевдоклассы нужны для стилизации HTML-элементов в зависимости от их состояния или положения на странице. Для создания псевдокласса нужны следующие шаги:
- выбираем селектор;
- ставим двоеточие;
- записываем псевдоселектор — ключевое слово, которое при определенных условиях будет менять состояние выбранного селектора.
Выберем псевдоселектор :hover и применим его к параграфу — сделаем так, чтобы при наведении курсора цвет текста менялся на синий. Таким образом, псевдоклассы реагируют на действия пользователей и меняют привычное состояние селекторов.
Псевдоэлементы
Псевдоэлементы необходимы для стилизации какой-то части HTML-элемента или добавления новых элементов, которых нет в файле разметки.
Порядок создания псевдоэлемента:
- выбираем селектор;
- ставим двойное двоеточие;
- записываем псевдоселектор — ключевое слово, которое изменит часть выбранного селектора или добавит новый элемент разметки.
Мы описали общий порядок. На практике часто приходится использовать псевдоэлементы ::before и ::after. Их особенность в свойстве content, которое нужно вкладывать в CSS-правила. Свойство content должно идти со значением, которое нужно указать в кавычках. Их можно оставить пустыми и стилизовать псевдоэлемент другими свойствами, но убирать свойство content нельзя. Иначе псевдоселекторы :before и ::after не сработают.
Вес CSS-селектора, или специфичность
Селектору могут быть заданы несколько противоречащих CSS-правил. Покрасим три заголовка на странице в красный цвет. Оставим это правило и добавим второе: попросим браузер перекрасить второй заголовок в синий. Получается, что все заголовки должны быть красного цвета, но второй — красного и синего. Это пример простого конфликта CSS-стилей, который разрешает специфичность.
Специфичность — это инструмент для определения приоритета CSS-правил в случае их противоречия друг другу. Суть специфичности сводится к трем шагам.
- Специфичность определяет веса конфликтующих селекторов.
- Если вес одного селектора больше другого, он выигрывает. Применяются его CSS-правила.
- Если веса конфликтующих селекторов равны, выигрывает тот, который объявлен позже.
В примере выше веса селекторов равны, но синий цвет добавлен позже. Поэтому для браузера он считается более специфичным. Заголовок перекрасится в синий.
Вес селектора зависит от того, насколько он конкретный. Самыми конкретными считаются селекторы по ID: уникальный идентификатор на странице обычно один, поэтому браузеры смогут быстро его вычислить. В среднюю категорию входят селекторы по классу, псевдоклассы и селекторы по атрибуту. К наименее конкретным относятся селекторы типов и псевдоэлементы. Вне категории встроенные стили, которые применяются в HTML-документе к какому-то тегу.
Сложно сравнивать составные селекторы, у которых перемешаны весовые категории. Возьмем первый селектор и добавим ему ID, два класса и три псевдоэлемента. Сравним его с селектором, у которого есть ID и три класса.
Второй селектор получится более специфичным: по ID он будет сопоставим с первым, но выиграет по количеству классов. До третьей колонки в нашем примере сравнение не дойдет. Если хотите поэкспериментировать с весовыми категориями, найдите онлайн любой калькулятор специфичности.