CSS-селекторы. Шпаргалка для новичков

8 августа 2025

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

Основные селекторы

Селекторы типа выбирают элементы HTML-документа по их тегу. Например, селектор p выберет все <p> на странице:

<body>
  <p>Текст</p>
  <p>Другой текст</p>
</body>

p {
  font-size: 16px;
}

Селекторы класса определяют стиль элементов с определённым классом. Например, этот селектор выберет абзац с классом .highlight.

<body>
  <p class="highlight">Текст</p>
  <p>Другой текст</p>
</body>

.highlight {
  background-color: yellow;
}

Селекторы идентификатора выбирают элемент по его уникальному идентификатору. Например, #welcome соответствует элементу с id="welcome":

<div id="welcome">
  <p>Добро пожаловать!</p>
</div>

#welcome {
  background-color: blue;
}

Селекторы наличия и значения атрибута находят все элементы, которые имеют определённый атрибут или значение атрибута. Например, здесь мы выбираем все ссылки, которые начинаются на http://, но не имеют example.com.

a[href^="http://"]:not([href*="example.com"]) {
  color: #000;
  text-decoration: none;
}

Универсальный селектор позволяет прописать стили для всех элементов HTML без исключения. Он указывается в виде звёздочки *. В примере ниже мы используем универсальный селектор с псевдоэлементами, чтобы изменить расчёт общего размера элемента.

*,
*::before,
*::after {
  box-sizing: border-box;
}

Селекторы-комбинаторы

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

Пример DOM-дерева. Здесь html — родитель для head и body. В свою очередь head — родитель для meta и title, а body — для header и main

Соседний родственный комбинатор

Записывается как селектор1 + селектор2. Выбирает элемент, подходящий под селектор2, перед которым расположен элемент, подходящий под селектор1.

<div>
  <p class="first">Сегодня я стал великим фронтендером.</p>
  <p class="second">Я написал стили для текста.</p> 
<div>

.first + .second {
  color: white;
}

Селектор .first + .second применит стили к абзацу с классом .second, потому что перед ним есть элемент с классом .first. Предложение «Я написал стили для текста.» станет белым.

Дочерний комбинатор

Записывается как селектор1 > селектор2. Выбирает элементы, которые являются прямыми потомками элемента, подходящего под селектор1.

<div class="decoration">
  <p>Я выучил CSS</p>
	<div>
    <p>Ну селекторы точно знаю.</p>
  </div>
</div>

.decoration > p {
  color: red;
}

Стили применятся только к «Я выучил CSS», этот текст станет красным.

Общий родственный комбинатор

Записывается как селектор1 ~ селектор2. Добавляет стили для элемента, который соответствует селектор2, если перед ним стоит элемент, подходящий под селектор1. Оба элемента должны принадлежать одному родителю.

<div>
  <p>Это было прекрасное раннее утро. Идеальное время, чтобы приготовить чашку кофе или чая, открыть ноутбук и выучить CSS.</p>
  <p>Так Вовка и поступил. Погладил кота, набрался решимости и открыл для себя новый мир вёрстки.</p>
</div>

p ~ p {
  margin-top: 1em;
}

Стили применятся ко второму параграфу, появится внешний отступ сверху.

Этот селектор отличается от соседнего селектора тем, что между элементами селектор1 и селектор2 могут находиться другие элементы.

Комбинатор потомка

Записывается как селектор1 селектор2. Находит все потомки элемента, который подходит под селектор1, и применяет к ним стили.

<p>Оказалось, что селекторы — это
  <span>не так страшно,</span>
  как я думал. Нужно только немного попрактиковаться,
  <span>и всё сразу станет ясно.</span>
</p>

p span {
  color: blue;
}

Здесь в синий цвет окрасятся «не так страшно» и «всё сразу станет ясно.».

Селекторы псевдоклассов

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

? Простой селектор — это селектор по одному условию, односоставной.

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

Чтобы использовать псевдокласс, нужно добавить его в селектор, например:

a:active {
  color: red;
}

В этом примере мы меняем цвет ссылки на красный, когда пользователь кликает по ней.

`:hover`

Псевдокласс :hover соответствует элементу, когда пользователь наводит на него курсор мыши. Например, здесь псевдокласс используется, чтобы убрать подчёркивание ссылки:

Как убрать подчёркивание ссылки

<a href="#">Нажми на меня</a>

a:hover {
  text-decoration: none;
}

`:active`

Псевдокласс :active соответствует элементу, на который активно нажимают. Здесь псевдокласс используется для скругления рамок кнопки, когда на неё кликают:

button:active {
  border-radius: 30px;
}

`:visited`

Псевдокласс :visited соответствует посещённой ссылке. Например, с его помощью мы можем поменять цвет ссылки, по которой перешёл пользователь:

a:visited {
  color: grey;
}

`:focus`

Псевдокласс :focus соответствует элементу, находящемуся в фокусе — то есть когда элемент выбран для ввода или навигации с помощью клавиатуры. Например, здесь :focus используется для добавления зелёной рамки вокруг поля ввода:

<input type="text">

input:focus {
  border: 2px solid green;
}

`:first-child`, `:last-child` и `:nth-child(n)`

Эти псевдоклассы выбирают элемент по его порядковому номеру. :first-child соответствует первому дочернему элементу родителя, :last-child — последнему. А псевдокласс :nth-child(n) указывает на n-й дочерний элемент. Например, с его помощью можно выбрать второй, пятый или предпоследний элемент. Вместо n в скобках указывается целое число или математическое выражение.

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

/* выберет первый элемент — HTML*/
li:first-child {
  font-weight: 700;
}

/* выберет последний элемент — JavaScript*/
li:last-child {
  text-decoration: underline;
}

/* выберет второй элемент — CSS*/
li:nth-child(2) {
  font-weight: 700;
}

`:first-of-type`, `:last-of-type` и `:nth-of-type(n)`

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

<div>
  <p>Первый параграф</p>
  <p>Второй параграф</p>
  <div>
    <span>Выделенный текст</span>
    <p>Третий параграф</p>
    <p>Четвёртый параграф</p>
  </div>
  <p>Пятый параграф</p>
  <span>Выделенный текст</span>
</div>

/*Текст в первом теге <p> будет жирным*/
p:first-of-type {
  font-weight: 700;
}

/*Текст во втором теге <p> будет подчёркнут*/
p:nth-of-type(2) {
  color: green;
}

/*Текст в последнем теге <p> будет подчёркнут*/
p:last-of-type {
  text-decoration: underline;
}

«Первый параграф» и «Третий параграф» станут жирными. «Второй параграф и «Четвёртый параграф» окрасятся в зелёный. «Четвёртый параграф» и «Пятый параграф» будут подчёркнутыми.

Если мы используем здесь first-child, nth-child(2) и last-child, то получим другую картину. Жирным станет только «Первый параграф». В зелёный окрасятся «Второй параграф» и «Третий параграф». Подчёркнутым будет «Четвёртый параграф». И всё это из-за того, что между <p> есть другие элементы — <span>.

Слева стилизуем текст с помощью селекторов *-of-type, справа — *-child

`:empty`

Псевдокласс :empty — это селектор CSS, который соответствует элементам, не имеющим дочерних элементов, включая текстовые узлы и другие элементы. Его можно использовать для стилизации элементов, которые пусты или не имеют содержимого:

<input type="text">

input:empty {
  border: 1px solid red;
}}

В этом примере мы с помощью :empty добавляем красную рамку пустому инпуту.

:has()

:has() — это мощный CSS-псевдокласс из спецификации Selectors Level 4, который позволяет выбирать элементы, содержащие определённые дочерние элементы или соответствующие определённым условиям внутри себя. Его часто называют «селектором родителя», потому что он даёт возможность стилизовать родительский элемент в зависимости от содержимого.

Например, следующий селектор выберет все элементы <article>, внутри которых есть хотя бы один тег <img>:

article:has(img) {
  border: 2px solid green;
}

Другой пример — выделение <form>, в которой есть обязательные поля (required):

form:has(input[required]) {
  background-color: #f9f9f9;
  padding: 1em;
}

Это открывает новые возможности: можно выделить карточки с изображениями, формы с особыми полями или контейнеры, которые содержат определённые типы элементов. Однако стоит учитывать, что поддержка :has() в старых браузерах ограничена, поэтому перед использованием лучше проверить совместимость.

Заключение

Мы разобрали самые популярные селекторы, но на самом деле их больше. Полный перечень вы найдёте в спецификации W3C. А чтобы научиться использовать селекторы на практике, пройдите эти тренажёры из курса «Старт в программирование».

Ещё статьи про CSS

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Телеграм Подкаст Бесплатные учебники

Лигатуры в CSS: как сделать текст аккуратнее

Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали, что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.

Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.

Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.

CSS, Это база

9 августа 2025

CSS-градиенты в oklch

Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок, рамок, декоративных элементов и даже в интерактивных эффектах при наведении.

Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.

Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch. Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.

CSS

8 августа 2025

CSS :has() — проверка наличия потомков или соседних элементов

Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним. Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент. В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.

CSS

6 августа 2025

Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения

Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть. Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому» и какие фолбэки использовать уже сейчас.

CSS

5 августа 2025

Всё самое важное о псевдоклассе :default

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

Доступно в Baseline в статусе «Widely Available» с 2022-07-15

CSS

4 августа 2025

Как работает единица измерения em в CSS

Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.

Доступно в Baseline в статусе «Widely Available» с 2018-01-29

CSS

30 июля 2025

Как найти пустые элементы в CSS

Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.

CSS

29 июля 2025

Как работает ::first-line — оформление первой строки текста в CSS

Псевдоэлемент ::first-line позволяет задать особое оформление только для первой строки текста внутри элемента. Это полезно, когда нужно визуально выделить начало абзаца — например, сделать первую строку жирной, изменить цвет или стиль шрифта. Такой приём часто используют в типографике и веб-дизайне, чтобы направить внимание читателя.

Этот псевдоэлемент находится в Baseline в статусе «Widely Available» с 2018-01-29

Как использовать: first-line

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

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

p::first-line {
  font-weight: bold;
  color: red;
}

Этот стиль сделает только первую строку текста в каждом абзаце <p> красной и жирной. Важно: то, где заканчивается строка, зависит от ширины контейнера и размера шрифта, а не от переносов в HTML.

Какие свойства работают

Псевдоэлемент ::first-line не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:

Поддерживаются:

color
font и его производные (font-size, font-weight, font-style, font-variant)
letter-spacing, word-spacing
line-height
text-decoration
text-transform
vertical-align
background
margin-left и margin-right
padding-left и padding-right
border-left и border-right

Не поддерживаются:

display, position, transform, width, height и другие «структурные» свойства.

Это сделано, чтобы не нарушать верстку и избежать проблем с потоком документа.

Пример с цитатой

<blockquote>
  Когда вы начнёте, главное — не останавливаться.
</blockquote>

blockquote::first-line {
  text-transform: uppercase;
  letter-spacing: 2px;
}

Здесь первая строка цитаты будет написана ПРОПИСНЫМИ буквами с увеличенным расстоянием между символами. Это создаёт акцент и улучшает читаемость начала мысли.

Советы по использованию

Используйте ::first-line для декоративных акцентов: начало статьи, цитаты, описание карточки.
Старайтесь не задавать свойства, которые не поддерживаются — они просто игнорируются.
Не используйте псевдоэлемент для логических операций — он только визуальный.
Не забывайте про адаптивность: на разных экранах «первая строка» может меняться.

Поддержка

Псевдоэлемент ::first-line поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge. Работает на блоковых и строчно-блочных элементах (display: block, inline-block, inline).

Заключение

::first-line — это простой и эффективный инструмент, который помогает сделать текст живым и выразительным. Он особенно полезен для визуального оформления абзацев, заголовков, описаний, не вмешиваясь в HTML-структуру. Даже пара свойств может кардинально изменить восприятие контента.

Больше обзоров веб-функций — в телеграм-канале HTML Academy.

Нашли ошибку или опечатку? Напишите нам.

CSS

27 июля 2025

CSS-счётчики: как работает свойство counter-set

counter-set — это новое CSS-свойство, с помощью которого можно явно установить значение счётчика в нужный момент. Оно похоже на counter-reset, но отличается тем, что не сбрасывает счётчик, а просто присваивает ему конкретное значение. Это даёт больше контроля над нумерацией, особенно когда нужно продолжить счёт или задать его вручную в разных частях документа.

CSS-счётчики — это способ автоматически нумеровать элементы, например заголовки, пункты списка, шаги в инструкции. Их можно комбинировать с псевдоэлементами и свойством content, чтобы вставлять числа прямо в текст.

CSS

25 июля 2025

Как работает :not() в CSS — исключаем элементы из стилей правильно

Доступно в Baseline в статусе «Widely Available» с 2023-07-21

Псевдокласс :not() позволяет задать стили для всех элементов, кроме тех, что соответствуют определённому селектору. Это мощный инструмент, который делает CSS гибче, чище и избавляет от необходимости писать сложные конструкции или добавлять лишние классы в HTML.

CSS

20 июля 2025

CSS-селекторы. Шпаргалка для новичков

Основные селекторы

Селекторы-комбинаторы

Соседний родственный комбинатор

Дочерний комбинатор

Общий родственный комбинатор

Комбинатор потомка

Селекторы псевдоклассов

:hover

:active

:visited

:focus

:first-child, :last-child и :nth-child(n)

:first-of-type, :last-of-type и :nth-of-type(n)

:empty

:has()

Заключение

Ещё статьи про CSS

Читать дальше

Как использовать: first-line

Какие свойства работают

Пример с цитатой

Советы по использованию

Поддержка

Заключение

Вход

Регистрация

Восстановление доступа

Запишитесь на консультацию

`:hover`

`:active`

`:visited`

`:focus`

`:first-child`, `:last-child` и `:nth-child(n)`

`:first-of-type`, `:last-of-type` и `:nth-of-type(n)`

`:empty`