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. Можно выбрать элементы, которые являются потомками, соседями или родителями других элементов.
Соседний родственный комбинатор
Записывается как селектор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>.
: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
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Псевдоклассы валидации форм: делаем интерфейсы понятнее
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
- 15 августа 2025
Как сделать первую букву абзаца большой — буквица через ::first-letter
Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.
Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.
- 12 августа 2025
Лигатуры в CSS: как сделать текст аккуратнее
Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали,
что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки
не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости
и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.
Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.
Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.
CSS-градиенты в oklch
Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций
linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок,
рамок, декоративных элементов и даже в интерактивных эффектах при наведении.
Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.
Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch.
Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.
- 8 августа 2025
CSS :has() — проверка наличия потомков или соседних элементов
Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним.
Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент.
В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.
- 6 августа 2025
Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения
Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать
направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже
рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть.
Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому»
и какие фолбэки использовать уже сейчас.
- 5 августа 2025
Всё самое важное о псевдоклассе :default
Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.
Доступно в Baseline в статусе «Widely Available» с 2022-07-15
- 4 августа 2025
Как работает единица измерения em в CSS
Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
- 30 июля 2025
Как найти пустые элементы в CSS
Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.
- 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 не поддерживает любые стили. Он ограничен только теми, что могут визуально применяться к строке текста:
Поддерживаются:
colorfontи его производные (font-size,font-weight,font-style,font-variant)letter-spacing,word-spacingline-heighttext-decorationtext-transformvertical-alignbackgroundmargin-leftиmargin-rightpadding-leftиpadding-rightborder-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.
Нашли ошибку или опечатку? Напишите нам.
- 27 июля 2025