Исполняемые доки CSS: Псевдоклассы CSS

Q: Как работает nth-child в CSS?

:nth-child(an+b) выбирает элементы, чья позиция среди соседей равна a×n+b при n = 0, 1, 2 и так далее, счет с 1. :nth-child(3) это третий дочерний элемент, :nth-child(odd) или 2n+1 каждый нечетный, а :nth-child(n+4) четвертый и все следующие.

Q: Чем nth-child отличается от nth-of-type?

:nth-child() считает все соседние элементы, а потом проверяет остальную часть селектора; :nth-of-type() считает только соседей того же типа. В списке из h2 и следующих за ним абзацев p:nth-child(1) ничего не выбирает, а p:nth-of-type(1) выбирает первый абзац.

Q: Как использовать :not() в CSS?

Поместите в скобки селектор, который нужно исключить: li:not(.done) выбирает все пункты списка без класса done. Он принимает и список: input:not([type="checkbox"], [type="radio"]).

Q: Чем псевдокласс отличается от псевдоэлемента?

Псевдокласс (одно двоеточие, :hover) выбирает целый существующий элемент в каком-то состоянии. Псевдоэлемент (два двоеточия, ::before) обращается к части элемента или создает генерируемое содержимое.

Что такое псевдокласс

Псевдокласс это ключевое слово после двоеточия, которое выбирает элементы по их позиции в документе или по состоянию. Его присоединяют к обычному селектору: li:first-child, input:focus, a:hover.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pseudo-classes</title>
  <style>
    li { padding: 6px 10px; list-style: none; }
    li:nth-child(odd) { background: #e5e7eb; }       /* zebra stripes */
    li:first-child { font-weight: bold; }
    li:last-child { color: #2563eb; }
    li:not(.done) { border-inline-start: 4px solid #f59e0b; }
  </style>
</head>
<body>
  <ul>
    <li>First child: bold</li>
    <li class="done">Done: no amber edge</li>
    <li>Odd rows are gray</li>
    <li class="done">Done</li>
    <li>Last child: blue</li>
  </ul>
</body>
</html>

Псевдоклассам состояния ссылок и мыши (:hover, :active, :visited) посвящена отдельная страница, hover в CSS.

:nth-child() и формула an+b

:nth-child() принимает число, ключевое слово или формулу an+b. Браузер перебирает n = 0, 1, 2, ... и выбирает каждую позицию, которую дает формула (позиции начинаются с 1).

Формула	Выбирает позиции	Значение
`3`	3	Третий дочерний элемент
`odd` или `2n+1`	1, 3, 5, ...	Нечетные строки
`even` или `2n`	2, 4, 6, ...	Четные строки
`3n`	3, 6, 9, ...	Каждый третий
`n+4`	4, 5, 6, ...	Четвертый и следующие
`-n+3`	1, 2, 3	Первые три
`3n+1`	1, 4, 7, ...	Каждый третий, начиная с первого

Введите формулу и посмотрите, какие пункты подходят:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-child tester</title>
  <style>
    .grid { display: grid; grid-template-columns: repeat(6, 40px); gap: 6px; padding: 0; }
    .grid li {
      list-style: none;
      height: 40px;
      display: grid;
      place-items: center;
      background: #e5e7eb;
      border-radius: 6px;
    }
  </style>
  <style id="live"></style>
</head>
<body>
  <label>li:nth-child( <input id="f" value="3n+1" size="8"> )</label>
  <ul class="grid" id="grid"></ul>
  <script>
    const grid = document.getElementById('grid');
    for (let i = 1; i <= 18; i++) grid.innerHTML += '<li>' + i + '</li>';
    const input = document.getElementById('f');
    const update = () => {
      document.getElementById('live').textContent =
        '.grid li:nth-child(' + input.value + ') { background: #2563eb; color: white; }';
    };
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Попробуйте odd, even, 4, n+7, -n+5 и 2n+3. Невалидная формула ничего не выбирает.

Близнец, считающий с конца, это :nth-last-child(): li:nth-last-child(-n+2) выбирает два последних пункта.

nth-child и nth-of-type

:nth-child() считает все соседние элементы, какой бы ни был тег, и только потом проверяет остальную часть селектора. :nth-of-type() считает только соседей с тем же тегом. Разница видна, как только соседи смешаны:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>nth-of-type</title>
  <style>
    p, h2 { margin: 4px 0; padding: 4px 8px; }
    p:nth-child(2) { background: #f59e0b; }   /* 2nd child AND a p */
    p:nth-of-type(2) { color: #2563eb; font-weight: bold; } /* 2nd p */
  </style>
</head>
<body>
  <h2>Heading (child 1)</h2>
  <p>Paragraph 1, child 2: amber</p>
  <p>Paragraph 2, child 3: blue and bold</p>
  <p>Paragraph 3, child 4</p>
</body>
</html>

Такие же пары есть для краев: :first-child / :first-of-type, :last-child / :last-of-type, :only-child / :only-of-type.

:not(), :is() и :where()

Псевдокласс	Пример	Выбирает
`:not(X)`	`li:not(.done)`	Элементы, которые не подходят под X
`:is(X, Y)`	`:is(h1, h2, h3) a`	Элементы, подходящие под любой из списка
`:where(X, Y)`	`:where(ul, ol) li`	То же, что `:is()`, с нулевой специфичностью
`:has(X)`	`li:has(> input:checked)`	Элементы, внутри которых есть совпадение с X

:not() используется каждый день, например чтобы поставить разделитель между пунктами, но не после последнего:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>not</title>
  <style>
    .tags { padding: 0; }
    .tags li { display: inline; list-style: none; }
    .tags li:not(:last-child)::after { content: " · "; color: #2563eb; }
    input:not([type="checkbox"]) { border: 2px solid #16a34a; }
  </style>
</head>
<body>
  <ul class="tags"><li>html</li><li>css</li><li>js</li></ul>
  <input type="text" placeholder="Text: green border">
  <input type="checkbox" aria-label="Checkbox, default border">
</body>
</html>

Псевдоклассы состояния: focus, checked, disabled, invalid

Псевдокласс	Выбирает
`:focus`	Элемент, на котором фокус клавиатуры или мыши
`:focus-visible`	Элемент в фокусе, когда браузер решает показать рамку (обычно при фокусе с клавиатуры)
`:focus-within`	Элемент, внутри которого находится элемент в фокусе
`:checked`	Отмеченный чекбокс, радиокнопку или выбранный `<option>`
`:disabled` / `:enabled`	Элементы форм, которые отключены (или нет)
`:required` / `:optional`	Поля с `required` или без него
`:invalid` / `:valid`	Поля, значение которых не проходит или проходит проверку
`:user-invalid`	Невалидные, но только после взаимодействия пользователя с полем
`:placeholder-shown`	Поле, в котором сейчас виден placeholder
`:empty`	Элемент без дочерних узлов, даже без текста
`:target`	Элемент, id которого совпадает с `#fragment` в URL

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>States</title>
  <style>
    input { padding: 6px; border: 2px solid #e5e7eb; border-radius: 6px; outline: none; }
    input:focus-visible { border-color: #2563eb; }
    input:user-invalid { border-color: #f59e0b; }
    .field:focus-within label { color: #2563eb; }
    input:checked + label { text-decoration: line-through; color: #16a34a; }
    button:disabled { opacity: 0.4; }
  </style>
</head>
<body>
  <p class="field">
    <label for="mail">Email</label>
    <input id="mail" type="email" required placeholder="you@example.com">
  </p>
  <p>
    <input type="checkbox" id="task" checked>
    <label for="task">Checked task</label>
  </p>
  <button disabled>Disabled button</button>
</body>
</html>

Кликните в поле email: его подпись станет синей благодаря :focus-within. Введите что-то, что не является email, и выйдите из поля: :user-invalid сделает рамку янтарной. Обычный :invalid пометил бы пустое обязательное поле янтарным еще до того, как вы к нему прикоснулись.

Что бы вы ни делали с :focus, оставляйте видимый стиль фокуса. Если убрать outline без замены, пользователи клавиатуры не увидят, где находятся.

:has(), селектор родителя

:has() выбирает элемент по тому, что в нем находится. Это давно ожидаемый «селектор родителя», и он работает в актуальных Chrome, Firefox и Safari.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>has</title>
  <style>
    .option { display: block; border: 2px solid #e5e7eb; padding: 8px; margin: 6px 0; border-radius: 6px; }
    .option:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
  </style>
</head>
<body>
  <label class="option"><input type="radio" name="plan" checked> Monthly</label>
  <label class="option"><input type="radio" name="plan"> Yearly</label>
</body>
</html>

Выберите другой тариф: вся карточка следует за радиокнопкой, без JavaScript.

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

Пробел перед двоеточием. li :first-child означает «первый дочерний элемент внутри li». Пишите li:first-child.
Ожидание, что p:nth-child(1) значит «первый p». Он значит «первый дочерний элемент, если это p». Для первого p используйте :first-of-type.
Счет с 0. Позиции начинаются с 1: :nth-child(0) ничего не выбирает.
Удаление рамки фокуса. :focus { outline: none } без замены ломает навигацию с клавиатуры.
Путаница : и ::. :before это старое написание псевдоэлемента ::before; псевдоклассы всегда пишутся с одним двоеточием.

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

Что такое псевдокласс в CSS?

Ключевое слово после двоеточия, которое выбирает элементы по состоянию или позиции, а не по имени, например a:hover, li:first-child или input:focus. Его добавляют к обычному селектору, и большинство псевдоклассов в специфичности считаются как класс (:where() считается нулем).

Как работает nth-child в CSS?

:nth-child(an+b) выбирает элементы, чья позиция среди соседей равна a×n+b при n = 0, 1, 2 и так далее, счет с 1. :nth-child(3) это третий дочерний элемент, :nth-child(odd) или 2n+1 каждый нечетный, а :nth-child(n+4) четвертый и все следующие.

Чем nth-child отличается от nth-of-type?

:nth-child() считает все соседние элементы, а потом проверяет остальную часть селектора; :nth-of-type() считает только соседей того же типа. В списке из h2 и следующих за ним абзацев p:nth-child(1) ничего не выбирает, а p:nth-of-type(1) выбирает первый абзац.

Как использовать :not() в CSS?

Поместите в скобки селектор, который нужно исключить: li:not(.done) выбирает все пункты списка без класса done. Он принимает и список: input:not([type="checkbox"], [type="radio"]).

Чем псевдокласс отличается от псевдоэлемента?

Псевдокласс (одно двоеточие, :hover) выбирает целый существующий элемент в каком-то состоянии. Псевдоэлемент (два двоеточия, ::before) обращается к части элемента или создает генерируемое содержимое.

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