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

17 февраля 2023

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

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

Селекторы типа выбирают элементы 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](http://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 добавляем красную рамку пустому инпуту.

Заключение

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

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

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

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

10 свойств в CSS о которых вы, вероятно, не знали

Если вы только начинаете разбираться в CSS, скорее всего, вам кажется, что мир стилей ограничивается свойствами вроде <margin>, <color>, <font-size> и может быть, <flex>. Но CSS — это не просто про то, чтобы задать цвет кнопке и отступ между блоками. За простыми примерами скрывается целый мир возможностей, о которых многие не догадываются. В этой статье рассказываем о десяти свойствах, которые встречаются редко, но способны заметно упростить вам жизнь или добавить в проект изюминку.

CSS

22 июня 2025

Округление в CSS с функцией round()

Функция round() появилась в CSS как часть стандарта Values and Units Level 4. Она предназначена для округления числовых значений до нужной кратности. Это полезный инструмент, который позволяет контролировать размеры и позиции без лишних ухищрений с calc() или JavaScript.

CSS

22 июня 2025

focus-visible

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

Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.

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

Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.

CSS

21 июня 2025

CSS font-palette: управление цветами шрифтов

Свойство font-palette позволяет выбрать одну из цветовых палитр, встроенных в цветной шрифт, или создать свою. При использовании — оно задаёт преобладающую окраску глифов, и свойство color уже не влияет.

В свою очередь, цветной шрифт — это шрифт, в котором глифы содержат встроенную информацию о цвете. В отличие от обычных векторных шрифтов (TrueType, OpenType), где цвет задаётся снаружи с помощью CSS-свойства color, в цветном шрифте сами глифы уже закодированы с цветными деталями — например, несколько заливок, градиенты, обводки, изображения.

Альтернативные цветовые палитры шрифта Nabla (Typearture, Google Fonts)

Свойство вошло в Baseline в статусе widely available в мае 2025 года. Теперь его можно использовать в проектах и не переживать о поддержке.

CSS

18 июня 2025

Как анимировать CSS Grids без JavaScript

Grid Layout — одна из самых зрелых технологий в CSS. Он давно решает задачи макета гораздо лучше, чем float, flex и position. Но долгое время у него была одна неочевидная граница: анимация размеров сетки.

Да, grid-template-columns и grid-template-rows существовали с самого начала появления гридов. Да, они были мощными. Но плавно менять их было нельзя — браузеры просто прыгали между состояниями. Анимация сетки оставалась мечтой.

Ситуация изменилась c 27 апреля 2025 года. Анимация grid-template-columns и grid-template-rows вошла в baseline — это означает, что теперь она официально поддерживается всеми современными браузерами. Без флагов. Без хака с display: contents. Просто работает.

CSS

1 июня 2025

Все единицы измерения в CSS от лучших к худшим

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

Абсолютные:

px — пиксели
cm — сантиметры
mm — миллиметры
in — дюймы
pt — типографские пункты
pc — пика

Относительные:

z% — процент от родителя
em — от размера шрифта родителя
rem — от размера шрифта корня
vw — 1% от ширины вьюпорта
vh — 1% от высоты вьюпорта
vmin / vmax — минимальное/максимальное из vw и vh
fr — доля пространства в грид-сетке
ch — ширина символа «0»
ex — высота строчной буквы «x»

Примеры ниже снабжены пояснениями из практики, с фокусом на применение в реальных проектах.

CSS

30 мая 2025

Как размыть фон под элементом с помощью backrop-filter

В сентябре 2024 в Baseline в статусе Widely-available вошло CSS-свойство backdrop-filter. Оно делает красивое: позволяет применить фильтры (размытие, контраст, яркость, и прочее) к фону за элементом. Не к самому элементу, а именно к тому, что за ним — это важно.

То есть если у вас есть модальное с полупрозрачным фоном, вы можете сделать так, чтобы то, что под ней, красиво размывалось, как в macOS или на айфоне. Это и есть главное применение backdrop-filter.

Пример минимального кода:

<div class="glass-panel">Контент</div>

.glass-panel {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.3);
}

Чтобы это работало, у элемента должен быть фон с прозрачностью (например, rgba или hsla), иначе фильтр не виден. И да, backdrop-filter визуально различим только если элемент реально перекрывает что-то.

CSS

5 мая 2025

$Справочник по новым математическим функциям CSS$

Справочник по новым математическим функциям CSS

За последние годы в CSS добавилось много математических функций, для которых не нужен JavaScript. Их можно использовать в анимациях, в графиках для визуализации данных или просто для создания красивых пользовательских интерфейсов.

Эта статья — справочник, который вы можете добавить в закладки и обращаться по мере необходимости. А подробно ознакомиться с работой математических функций можно в интерактивной демонстрации в HTML Academy.

Статья дополняется.

CSS

28 апреля 2025

CSS Scroll-Driven Animations: что это, зачем нужно и как начать пользоваться

Раньше, чтобы анимировать что-то при прокрутке, приходилось писать JavaScript. Слушать события scroll, вычислять позиции элементов, руками задавать стили. Это было сложно и работало неэффективно. Но в 2025 в CSS появилась нормальная нативная поддержка скролл-анимаций.

Частичная поддержка есть в Chrome 115+, Edge 115+ и Opera 117+, с флагами — в Firefox 110+. Ждём ещё Safari.

Внимание! Все примеры в этой статье работают только в Chrome 116+.

CSS

27 апреля 2025

Анимация по любой траектории с offset-path

У вас же было такое, что ждёте курьера или доставку, а их всё нет и нет? Заходите сайт, обновляете статус, а там «В пути» и больше никакой информации. У нас вот было много раз.

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

CSS

18 апреля 2025

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

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

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

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

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

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

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

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

:hover

:active

:visited

:focus

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

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

:empty

Заключение

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

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

Вход

Регистрация

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

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

`:hover`

`:active`

`:visited`

`:focus`

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

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

`:empty`