Селекторы в CSS: что это такое, как они работают и какие бывают

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

Селекторы помогают не только с буквами. С их помощью можно сформировать любые элементы веб-сайта на уровне кода. Например, можно группировать элементы, менять цвет, шрифт, размер, отступы, списки, подзаголовки. Чаще всего селекторы CSS используют при создании рекламных баннеров, статей и другого контента, где важно визуальное оформление. Например, в коде сайта Яндекса тоже используются селекторы.

Работать с селекторами учат на курсе «Фулстек-разработчик». Студенты с нуля за 16 месяцев научатся использовать CSS, HTML, JavaScript и другие языки программирования. За время обучения студенты получат 16 работ для портфолио и диплом о профессиональной переподготовке.

Селекторы различаются в зависимости от целей. Рассмотрим шесть типов селекторов, которые используют чаще всего.

1. По тегу — разрешают применить единый стиль к каждому элементу одного типа (тега) на веб-странице. Они применяется для единого форматирования, например, заголовков, параграфов, списков и т. д. Селектор по тегу — один из самых простых и популярных селекторов.

В этом примере тег «р» присваивает голубой цвет

2. По классам — присваивают стили элементам с одинаковым классом. Класс может быть назначен для одного или нескольких элементов в HTML. Обозначается точкой (.), за которой прописано имя класса.

Селектор по классам позволяет ориентироваться на многочисленные элементы на странице.

Пример класса с именем example

Приведём другой пример. Укажем в качестве селектора .highlight, а к выбранному элементу применим следующие свойства: фоновый цвет — жёлтый; шрифт-вес — жирный. Тогда селектор выберет все элементы с подсветкой класса в HTML-документе и применит к ним указанные стили.

Такой код получится, если применить селектор .highlight

3. По идентификаторам — применяются при присвоении стиля уникальным элементам сайта. Селектор обозначается символом #, за которым следует имя идентификатора.

Пример селектора с идентификатором header

4. Групповые селекторы — позволяют применять одинаковые стили к нескольким селекторам, разделяя их запятой.

Синтаксис группового селектора

Рассмотрим пример применения кода CSS. Допустим, нужно, чтобы элементы h1, h2 и p имели одинаковые определения стилей — например, были окрашены в красный цвет.

Теперь на сайте все элементы h1, h2 и p будут красного цвета

5. Универсальный селектор — позволяет задавать стили для всех элементов без исключения. Его используют, например, для сброса стилей или установки базовых значений. Обозначается символом *. С помощью универсального селектора можно привести отдельные элементы веб-сайта к единому стилю: допустим, присвоить шрифту единый размер, тексту — единый стиль или цвет, и т. д.

Синтаксис универсального селектора

Селектором CSS в этом примере является img[alt], а к выбранному элементу применяется свойство border: 2px — сплошной зелёный

Вот ещё примеры применения селекторов атрибутов:

Атрибутов может быть больше. Это примеры атрибутов, которые чаще всего используют в работе разработчики

Псевдоклассы в CSS (:) — это селекторы, которые обозначают элемент при каком-либо действии, например когда пользователь наводит курсор на подсказки или кликает по ссылке. На одной веб-странице можно применять сразу несколько псевдоклассов. Рассмотрим два примера.

1. Допустим, нужно, чтобы ссылка подсвечивалась голубым и выделялась подчёркиванием, если на неё навести курсор.

Так будет выглядеть код, где «а» — это ссылка, а hover — это псевдокласс

2. Нужно, чтобы элемент окрашивался в синий, если на него кликнуть.

Код с псевдоклассом :active — он выбирает элемент, когда пользователь нажимает на него

Псевдоэлементы (::) — это тоже селекторы, но, в отличие от псевдоклассов, они создают области в документе HTML, которых изначально не было. Селекторы псевдоэлементов используются для стилизации части элемента — например, для выделения первой заглавной буквы, строки или вставки новой информации. Допустим, нам нужно вставить элемент перед уже существующем в коде элементом — для этого в код нужно добавить псевдоэлемент ::before. А чтобы текст стоял после элемента, можно применить псевдоэлемент ::after.

Приведём примеры использования универсального селектора и селектора по классам.

● Селектор по классам. Присвоим селектору имя .highlight, а к выбранному элементу применим свойства:

1) фон — жёлтый;
2) шрифт — жирный.

Селектор определит все элементы с подсветкой класса в документе и применит к ним указанные стили — жёлтый фон и жирный шрифт

Вот так будет выглядеть HTML-код:

Элементы

и с классом «highlight» имеют жёлтый фон и жирный шрифт

● Универсальный селектор. Допустим, нужно установить отступы по умолчанию для всех элементов на странице. Код будет таким:

Теперь по умолчанию будет применяться отступ в 10 пикселей для всех элементов веб-страницы

Комбинирование селекторов (комбинаторы) — это применение нескольких селекторов в одном коде для уточнения того, какие элементы нужно стилизовать: например, присвоить стиль элементам на основе их типа, характеристик или отношения к другим элементам. Чтобы применить стиль к нескольким элементам, можно комбинировать селекторы с помощью запятых. Кроме того, селекторы можно комбинировать, используя селекторы-потомки, дочерние селекторы, соседние одноуровневые селекторы и сгруппированные селекторы. Расскажем об этом подробнее.

● Селектор потомков (Descendant Selector) — выбирает потомков указанных элементов. Обозначается как пробел.

Приведём пример с селектором div p, а к выбранному элементу применим следующие свойства: размер шрифта — 14 px; цвет — красный.

Селектор выберет все элементы < p >, которые являются потомками элемента < div > в документе HTML, и применит к ним указанные стили

● Дочерний селектор — выбирает элементы — потомки элементов внутри других элементов. Чтобы этот селектор работал, второй элемент должен быть дочерним по отношению к первому элементу. Обозначается как знак «>».

Возьмём для примера селектор div > p, а к выбранному элементу применим следующие свойства: размер шрифта — 14 px; цвет — красный.

Этот селектор выберет все элементы < p >, которые являются прямыми дочерними элементами элемента < div > в документе HTML, и применит к ним указанные стили

● Соседний (Adjacent Sibling Selector) — выбирает элемент, который непосредственно следует за другим элементом. Обозначается знаком плюс «+».
● Сгруппированный — позволяет применять одни и те же стили к нескольким селекторам одновременно. Обозначается как знак «~».

Специфичность селекторов в CSS — это механизм, который определяет, какие стили будут применяться к элементам, когда несколько правил совпадают. Специфичность выражается в виде четырёхзначного числа от 0001 до 1000. Чем выше специфичность, тем приоритетнее правило — селектор с наибольшим значением специфичности «выиграет», и его объявление стиля будет применено к этому элементу HTML.

Существует четыре категории, определяющие уровень специфичности селектора сверху вниз:

1. Стили в атрибуте style — высший приоритет (1-0-0-0).
2. Селекторы по индикатору (0-1-0-0).
3. Селекторы по типу — входят селекторы классов, псевдоклассов и атрибутов (0-0-1-0).
4. Селекторы по тегу и псевдоклассу — имеют низший приоритет (0-0-0-1).

Универсальный селектор и псевдоклассы :where() не учитываются при вычислении веса, поэтому их значение равно 0-0-0-0. Комбинаторы, такие как «+», «>», «~», «" "» и «||», не добавляют веса специфичности, но могут сделать селектор более конкретным. Аналогична ситуация с псевдоклассами :is(), :has() и отрицания (:not()): они сами по себе тоже не добавляют веса специфичности, но параметры в этих селекторах действуют. Вес специфичности каждого из них определяется параметром селектора в списке селекторов с самой высокой специфичностью.

Специфичность селекторов рассчитывается на основе типа селектора и их комбинации.

Рассмотрим пример, где:

● специфика A равна 1 (один селектор элемента);
● специфичность B равна 101 (одна ссылка на идентификатор + один селектор элемента);
● специфика C — 1000 (встроенный стиль).