Исполняемые доки CSS: Селекторы CSS

Q: Что такое селектор CSS?

Часть правила CSS перед {, которая указывает, к каким элементам применяются объявления. В p.note { color: blue; } селектор p.note выбирает каждый с классом note.

Q: Чем отличается пробел от > в селекторе CSS?

Пробел это комбинатор потомка: nav a выбирает все ссылки внутри nav на любой глубине. > это дочерний комбинатор: nav > a выбирает только ссылки, прямой родитель которых nav.

Q: Что означает + в CSS?

это комбинатор соседнего элемента. h2 + p выбирает , который идет сразу после с тем же родителем. ~ мягче: h2 ~ p выбирает все последующие того же родителя.

Q: Как выбрать элементы по атрибуту в CSS?

Запишите атрибут в квадратных скобках: [disabled] выбирает элементы, у которых он есть, [type="email"] точное значение, [href^="https"] значение, начинающееся со строки, [href$=".pdf"] заканчивающееся ею, а [class*="btn"] содержащее ее.

Q: Может ли CSS выбрать родительский элемент?

Да, с помощью псевдокласса :has(), который поддерживают актуальные Chrome, Firefox и Safari. li:has(> a.active) выбирает пункты списка, которые непосредственно содержат активную ссылку.

Что такое селектор CSS

Селектор это часть правила перед фигурными скобками. Он решает, к каким элементам применяются объявления.

p.note { color: #2563eb; }
/* selector: p.note    declaration: color: #2563eb */

Пять базовых селекторов покрывают большинство реальных таблиц стилей:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Basic selectors</title>
  <style>
    * { box-sizing: border-box; }           /* universal: every element */
    p { margin: 6px 0; }                    /* type: every <p> */
    .tip { background: #e5e7eb; padding: 6px; } /* class */
    #main-title { color: #2563eb; }         /* ID: one element */
    h2, .lead { font-style: italic; }       /* group: either one */
  </style>
</head>
<body>
  <h1 id="main-title">Selectors</h1>
  <p class="lead">A lead paragraph (grouped with h2).</p>
  <p class="tip">A tip, matched by .tip</p>
  <h2>A subheading</h2>
  <p>A plain paragraph.</p>
</body>
</html>

Виды селекторов коротко

Селектор	Пример	Выбирает
Универсальный	`*`	Все элементы
По типу	`p`	Каждый `<p>`
По классу	`.tip`	Элементы с `class="tip"` (среди прочих классов)
По ID	`#main-title`	Элемент с `id="main-title"`
По атрибуту	`[type="email"]`	Элементы с подходящим атрибутом
Псевдокласс	`a:hover`, `li:first-child`	Элементы в определенном состоянии или позиции
Псевдоэлемент	`p::first-line`, `.x::before`	Часть элемента
Группа	`h1, h2, h3`	Все, что подходит под любой из списка
Составной	`p.tip`	`<p>`, у которого есть еще и класс

Классам и ID посвящена отдельная страница, селектор класса CSS. Псевдоклассы вроде :nth-child() и :not() разобраны на странице про псевдоклассы.

Комбинаторы: потомок и дочерний элемент

Комбинатор соединяет два селектора по их отношению в дереве HTML. Их четыре.

Комбинатор	Синтаксис	Выбирает `B`, когда
Потомка	`A B` (пробел)	B находится где угодно внутри A
Дочерний	`A > B`	Родитель B это A
Соседний	`A + B`	B идет сразу после A, родитель общий
Общий родственный	`A ~ B`	B идет где-то после A, родитель общий

Чаще всего путают пробел и >. Селектор потомка достает на любую глубину, дочерний селектор останавливается на одном уровне:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Child selector</title>
  <style>
    li { padding: 2px 6px; margin: 2px 0; }
    .all li { background: #e5e7eb; }          /* descendant: every level */
    .direct > li { border-inline-start: 4px solid #2563eb; } /* child: top level only */
  </style>
</head>
<body>
  <ul class="all direct">
    <li>Top level: gray and blue edge</li>
    <li>Top level: gray and blue edge
      <ul>
        <li>Nested: gray only</li>
        <li>Nested: gray only</li>
      </ul>
    </li>
  </ul>
</body>
</html>

Родственные комбинаторы: + и ~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Siblings</title>
  <style>
    p { margin: 4px 0; padding: 4px 8px; }
    h2 + p { background: #f59e0b; }   /* only the first p after h2 */
    h2 ~ p { color: #2563eb; }        /* every p after h2 */
  </style>
</head>
<body>
  <p>Before the heading: untouched.</p>
  <h2>Heading</h2>
  <p>Right after h2: amber and blue.</p>
  <p>Later sibling: blue only.</p>
  <p>Later sibling: blue only.</p>
</body>
</html>

Родственные селекторы смотрят только вперед. Комбинатора «предыдущий сосед» нет, но это можно выразить через :has(): h2:has(+ p) выбирает h2, за которым сразу идет p.

Селекторы атрибутов

Квадратные скобки проверяют атрибуты и их значения:

Селектор	Выбирает
`[disabled]`	Есть атрибут, значение любое
`[type="email"]`	Значение ровно `email`
`[href^="https"]`	Значение начинается с `https`
`[href$=".pdf"]`	Значение заканчивается на `.pdf`
`[class*="icon"]`	Значение содержит `icon` в любом месте
`[lang\|="en"]`	Значение `en` или начинается с `en-`
`[data-state="open" i]`	Точное совпадение без учета регистра

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Attribute selectors</title>
  <style>
    a { display: block; margin: 4px 0; }
    a[href^="https"] { color: #16a34a; }
    a[href$=".pdf"] { font-weight: bold; }
    a[href$=".pdf"]::after { content: " (PDF)"; }
    input[type="email"] { border: 2px solid #2563eb; }
    [data-state="open"] { background: #e5e7eb; padding: 4px; }
  </style>
</head>
<body>
  <a href="https://example.com">External, https: green</a>
  <a href="/guide.pdf">Guide, bold with a label</a>
  <a href="/about">Relative link: untouched</a>
  <input type="email" placeholder="Email: blue border">
  <div data-state="open">data-state="open"</div>
</body>
</html>

Селекторы по атрибутам data-* позволяют чисто оформлять состояние, которое задает JavaScript, не придумывая имена классов.

Проверьте любой селектор

Введите селектор в поле. Каждый подходящий элемент получит янтарную обводку, а ниже появится их количество.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selector tester</title>
  <style>
    .hit { outline: 3px solid #f59e0b; }
    #demo { border: 1px solid #e5e7eb; padding: 8px; margin-top: 8px; }
    #demo * { margin: 4px 0; }
  </style>
</head>
<body>
  <input id="sel" value="#demo li:nth-child(2)" size="30">
  <span id="out"></span>
  <div id="demo">
    <h2 class="title">Title</h2>
    <p class="intro">Intro <a href="/a">link</a></p>
    <ul>
      <li>One</li>
      <li class="active">Two</li>
      <li>Three <a href="https://example.com">external</a></li>
    </ul>
  </div>
  <script>
    const sel = document.getElementById('sel');
    const out = document.getElementById('out');
    const run = () => {
      document.querySelectorAll('.hit').forEach((el) => el.classList.remove('hit'));
      try {
        const found = document.querySelectorAll(sel.value);
        found.forEach((el) => el.classList.add('hit'));
        out.textContent = found.length + ' match(es)';
      } catch (e) {
        out.textContent = 'Invalid selector';
      }
    };
    sel.addEventListener('input', run);
    run();
  </script>
</body>
</html>

Попробуйте #demo a, ul > li, h2 ~ *, a[href^="https"], li:not(.active).

Составной селектор и селектор потомка: пробел имеет значение

p.note и p .note различаются одним пробелом и означают разное.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Space matters</title>
  <style>
    p.note { background: #e5e7eb; }      /* a p that has .note */
    p .note { color: #16a34a; font-weight: bold; } /* a .note inside a p */
  </style>
</head>
<body>
  <p class="note">p.note: gray background</p>
  <p>Plain p with a <span class="note">span.note inside</span></p>
</body>
</html>

Как браузер применяет селекторы

Когда несколько правил подходят к одному элементу и задают одно свойство, побеждает более специфичный селектор, а при равенстве более поздний. ID перевешивает любое число классов, а класс любое число селекторов типа; полная таблица специфичности есть на странице про !important.

У группы есть подвох: если в обычном списке хотя бы один селектор невалиден, отбрасывается все правило. В a, b:unknown { } не оформятся даже ссылки. Если обернуть список в :is(), он становится снисходительным: :is(a, b:unknown) все равно оформит ссылки.

Частые ошибки

Нет точки или решетки. tip { } выбирает элемент <tip>, а не class="tip". Пишите .tip.
Пробел в составном селекторе. p .note это не p.note.
Ожидание, что > достанет до внуков. Для любой глубины используйте пробел.
Одна опечатка ломает всю группу. В h1, h2:hovr, h3 ничего не оформится.
Слишком длинные селекторы. body div.wrapper ul li a трудно читать и трудно переопределить. Обычно хватает одного класса.

Часто задаваемые вопросы

Что такое селектор CSS?

Часть правила CSS перед {, которая указывает, к каким элементам применяются объявления. В p.note { color: blue; } селектор p.note выбирает каждый <p> с классом note.

Чем отличается пробел от > в селекторе CSS?

Пробел это комбинатор потомка: nav a выбирает все ссылки внутри nav на любой глубине. > это дочерний комбинатор: nav > a выбирает только ссылки, прямой родитель которых nav.

Что означает + в CSS?

+ это комбинатор соседнего элемента. h2 + p выбирает <p>, который идет сразу после <h2> с тем же родителем. ~ мягче: h2 ~ p выбирает все последующие <p> того же родителя.

Как выбрать элементы по атрибуту в CSS?

Запишите атрибут в квадратных скобках: [disabled] выбирает элементы, у которых он есть, [type="email"] точное значение, [href^="https"] значение, начинающееся со строки, [href$=".pdf"] заканчивающееся ею, а [class*="btn"] содержащее ее.

Может ли CSS выбрать родительский элемент?

Да, с помощью псевдокласса :has(), который поддерживают актуальные Chrome, Firefox и Safari. li:has(> a.active) выбирает пункты списка, которые непосредственно содержат активную ссылку.

Связанные концепции