Тренажёр CSS-селекторов

Селектор определяет, к каким элементам страницы применится правило CSS. В тренажёре вы пишете селектор для готового фрагмента HTML и сразу видите, какие элементы он выбрал: в предпросмотре и в дереве разметки.

Задание засчитывается, когда селектор выбирает ровно нужные элементы. Подходит любой вариант с таким результатом: например, h2, h3 и :is(h2, h3) одинаково верны.

Как пользоваться

Выберите задание в списке или переходите стрелками. Номер задания сохраняется в адресе страницы, поэтому ссылкой можно поделиться.
Вводите селектор в поле — результат обновляется сразу. В дереве HTML найденные нужные элементы отмечены ✓, лишние — ✕, пропущенные — ○.
Если не получается, откройте подсказку или посмотрите один из возможных ответов.
Пройденные задания отмечаются галочкой в списке. Прогресс хранится только в вашем браузере; его можно сбросить.

Ограничения

Псевдоэлементы (::before, ::after) не являются элементами страницы, поэтому поиск их не находит.
Состояния :hover, :focus, :active в предпросмотре не наступают.
Проверку выполняет ваш браузер. Новые псевдоклассы, например :has(), в старых версиях не поддерживаются; тогда тренажёр сообщит, что не смог разобрать селектор.

Полный список селекторов с примерами — в справочнике «Селекторы, псевдоклассы и псевдоэлементы».

Тренажёр

Основы

Селектор по типу элемента

Выберите все абзацы <p>. Селектор типа — это просто имя тега.

<div class="container">
  <h1>Заголовок страницы</h1>
  <p>Первый абзац с текстом.</p>
  <p>Второй абзац тоже содержит текст.</p>
  <span>Элемент span</span>
  <p>Третий абзац.</p>
</div>

Читать: Селектор типа

Основы

Селектор по классу

Выберите все элементы с классом highlight. Перед именем класса ставится точка.

<nav class="menu">
  <a href="/home" class="link active">Главная</a>
  <a href="/about" class="link highlight">О нас</a>
  <a href="/contacts" class="link highlight">Контакты</a>
</nav>
<main>
  <p class="text highlight">Важное сообщение.</p>
  <p class="text">Обычный текст.</p>
</main>

Читать: Селектор .class

Основы

Селектор по id

Выберите элемент с id="main-heading". Перед id ставится решётка.

<header>
  <h1 id="main-heading">Добро пожаловать</h1>
</header>
<main>
  <section id="content">
    <p>Основной контент страницы.</p>
    <h2 id="section-title">Заголовок раздела</h2>
  </section>
</main>
<footer id="footer">Подвал сайта</footer>

Читать: Селектор id

Основы
Селектор потомков
Выберите все ссылки <a>, которые находятся внутри <nav>, на любом уровне вложенности.
```
<nav>
  <a href="/">Главная</a>
  <ul>
    <li><a href="/blog">Блог</a></li>
    <li><a href="/about">О нас</a></li>
  </ul>
</nav>
<p>Подробнее в <a href="/help">справке</a>.</p>
```
Читать: Селекторы потомков

Основы

Дочерний селектор

Выберите только пункты главного списка .main-list, без пунктов вложенного подменю.

<nav>
  <ul class="main-list">
    <li><a href="/">Главная</a></li>
    <li>Компания
      <ul class="submenu">
        <li><a href="/about">О нас</a></li>
        <li><a href="/team">Команда</a></li>
      </ul>
    </li>
    <li><a href="/blog">Блог</a></li>
  </ul>
</nav>

Читать: Селектор дочерних элементов

Основы

Смежный селектор

Выберите абзацы, которые стоят сразу после заголовка <h2>.

<article>
  <h2>Первая часть</h2>
  <p>Текст первой части.</p>
  <p>Продолжение первой части.</p>
  <h2>Вторая часть</h2>
  <blockquote>Цитата из источника.</blockquote>
  <p>Текст второй части.</p>
</article>

Читать: Селектор смежных элементов

Основы
Общий соседний селектор
Выберите все абзацы, которые идут после <h2> на том же уровне, а не только первый.
```
<div class="section">
  <p>Вступление до заголовка.</p>
  <h2>Раздел</h2>
  <p>Первый абзац.</p>
  <span>Промежуточный элемент</span>
  <p>Второй абзац.</p>
</div>
```
Читать: Селектор следующих элементов

Основы

Группировка селекторов

Выберите одним правилом все заголовки <h2> и <h3>.

<article>
  <h1>Статья</h1>
  <h2>Раздел 1</h2>
  <p>Текст раздела.</p>
  <h3>Подраздел</h3>
  <p>Подробнее.</p>
  <h2>Раздел 2</h2>
  <p>Следующий раздел.</p>
</article>

Читать: Групповые селекторы

Атрибуты и структура
Наличие атрибута
Выберите ссылки, у которых есть атрибут href.
```
<nav>
  <a href="/">Главная</a>
  <a href="/products">Продукты</a>
  <a href="#top">Наверх</a>
  <a>Без адреса</a>
  <span>Не ссылка</span>
</nav>
```
Читать: Селектор атрибутов

Атрибуты и структура

Значение атрибута

Выберите поле ввода с type="text".

<form>
  <label>Имя <input type="text" name="name"></label>
  <label>Почта <input type="email" name="email"></label>
  <label>Пароль <input type="password" name="password"></label>
  <button type="submit">Отправить</button>
</form>

Читать: Селектор атрибута (с указанным значением)

Атрибуты и структура
Псевдокласс :first-child
Выберите первый пункт в каждом списке.
```
<ul>
  <li>Яблоки</li>
  <li>Бананы</li>
  <li>Апельсины</li>
</ul>
<ul>
  <li>Красный</li>
  <li>Синий</li>
</ul>
```
Читать: Псевдокласс :first-child

Атрибуты и структура

Псевдокласс :nth-child()

Выберите каждый третий пункт списка.

<ol>
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
  <li>Четвёртый</li>
  <li>Пятый</li>
  <li>Шестой</li>
  <li>Седьмой</li>
  <li>Восьмой</li>
  <li>Девятый</li>
</ol>

Читать: Псевдокласс :nth-child()

Атрибуты и структура
Псевдокласс :nth-of-type()
Выберите каждый второй абзац. Заголовки и картинка между абзацами не должны сбивать счёт.
```
<section>
  <h2>Глава 1</h2>
  <p>Введение в тему.</p>
  <p>Подробное описание.</p>
  <figure>Иллюстрация</figure>
  <p>Заключение главы.</p>
  <h2>Глава 2</h2>
  <p>Начало второй главы.</p>
</section>
```
Читать: Псевдокласс :nth-of-type(), Псевдокласс :nth-child()
Атрибуты и структура
Начало значения атрибута
Выделите внешние ссылки — те, чей адрес начинается с https://.
```
<ul>
  <li><a href="https://developer.mozilla.org/">MDN</a></li>
  <li><a href="/css/css_book.php">Учебник CSS</a></li>
  <li><a href="https://caniuse.com/">Can I use</a></li>
  <li><a href="#contacts">Контакты</a></li>
  <li><a href="mailto:info@example.com">Написать</a></li>
</ul>
```
Читать: Селектор атрибута (значение начинается с определённых символов)
Атрибуты и структура
Конец значения атрибута
Выделите ссылки на файлы PDF — адреса, которые заканчиваются на .pdf.
```
<ul>
  <li><a href="/files/price.pdf">Прайс-лист</a></li>
  <li><a href="/files/pdf-guide.html">Как открыть PDF</a></li>
  <li><a href="/files/contract.pdf">Договор</a></li>
  <li><a href="/files/photo.jpg">Фото офиса</a></li>
</ul>
```
Читать: Селектор атрибута (заканчивается определёнными символами)

Атрибуты и структура

Подстрока в значении атрибута

Выделите ссылки, в адресе которых встречается слово youtube.

<ul>
  <li><a href="https://www.youtube.com/watch?v=1">Видеоурок 1</a></li>
  <li><a href="https://vimeo.com/2">Видеоурок 2</a></li>
  <li><a href="https://m.youtube.com/watch?v=3">Видеоурок 3</a></li>
  <li><a href="/video/youtube-embed.php">Как встроить ролик</a></li>
</ul>

Читать: Селектор атрибута (с определёнными символами)

Атрибуты и структура
Псевдокласс :last-child
Выделите последний пункт в каждом списке.
```
<ul>
  <li>Понедельник</li>
  <li>Вторник</li>
  <li>Среда</li>
</ul>
<ul>
  <li>Суббота</li>
  <li>Воскресенье</li>
</ul>
```
Читать: Псевдокласс :last-child
Атрибуты и структура
Псевдокласс :nth-last-child()
Выделите два последних пункта списка, сколько бы пунктов в нём ни было.
```
<ol>
  <li>Подготовка</li>
  <li>Разметка</li>
  <li>Стили</li>
  <li>Проверка</li>
  <li>Публикация</li>
</ol>
```
Читать: Псевдокласс :nth-last-child()
Атрибуты и структура
Псевдокласс :only-child
В каждой карточке выделите абзац, только если он единственный элемент внутри карточки.
```
<div class="card"><p>Короткая заметка.</p></div>
<div class="card">
  <h3>Новость</h3>
  <p>Текст новости.</p>
</div>
<div class="card"><p>Ещё одна заметка.</p></div>
```
Читать: Псевдокласс :only-child

Атрибуты и структура

Псевдокласс :empty

Выделите пустые ячейки таблицы, чтобы подсветить пропуски в данных.

<table>
  <tr><th>Товар</th><th>Цена</th><th>Остаток</th></tr>
  <tr><td>Стол</td><td>4 900</td><td></td></tr>
  <tr><td>Стул</td><td></td><td>12</td></tr>
  <tr><td>Полка</td><td>1 200</td><td>3</td></tr>
</table>

Читать: Псевдокласс :empty

Атрибуты и структура
Псевдокласс :last-of-type
Выделите последний абзац в каждой статье. После абзацев в статье идёт подпись автора.
```
<article>
  <p>Начало первой статьи.</p>
  <p>Конец первой статьи.</p>
  <footer>Автор: Анна</footer>
</article>
<article>
  <p>Единственный абзац второй статьи.</p>
  <footer>Автор: Борис</footer>
</article>
```
Читать: Псевдокласс :last-of-type, Псевдокласс :last-child

Атрибуты и структура

Обязательные поля

Выделите обязательные поля формы.

<form>
  <label>Имя <input name="name" required></label>
  <label>Телефон <input name="phone" type="tel"></label>
  <label>Почта <input name="email" type="email" required></label>
  <label>Комментарий <textarea name="comment"></textarea></label>
</form>

Читать: Псевдокласс :required

Продвинутые
Псевдокласс :not()
Выберите все пункты списка, кроме первого в каждом списке.
```
<ul>
  <li>Мука — 300 г</li>
  <li>Сахар — 150 г</li>
  <li>Яйца — 3 шт.</li>
</ul>
<ul>
  <li>Молоко — 200 мл</li>
  <li>Масло — 50 г</li>
</ul>
```
Читать: Псевдокласс отрицания :not(селектор), Псевдокласс :first-child
Продвинутые
Псевдокласс :has()
Выберите пункты меню <li>, внутри которых есть ссылка с классом active.
```
<ul class="nav">
  <li><a href="/" class="link">Главная</a></li>
  <li><a href="/news" class="link active">Новости</a></li>
  <li><span>Без ссылки</span></li>
  <li><a href="/blog" class="link active">Блог</a></li>
</ul>
```
Читать: Селекторы, псевдоклассы и псевдоэлементы

Продвинутые

:not() со списком

Выделите задачи, которые ещё не выполнены и не отложены — без классов done и skipped.

<ul class="tasks">
  <li class="done">Купить домен</li>
  <li>Сверстать главную</li>
  <li class="skipped">Сделать анимацию</li>
  <li>Подключить форму</li>
  <li class="done">Настроить хостинг</li>
</ul>

Читать: Псевдокласс отрицания :not(селектор)

Продвинутые
:has() с соседом
Выделите пункты, после которых в списке есть ещё пункт, — например, чтобы нарисовать между ними разделитель.
```
<ul>
  <li>Главная</li>
  <li>Каталог</li>
  <li>Доставка</li>
  <li>Контакты</li>
</ul>
```
Читать: Селекторы, псевдоклассы и псевдоэлементы, Селектор смежных элементов
Продвинутые
:has() и состояние поля
Выделите карточки тарифов, в которых отмечен переключатель.
```
<label class="plan"><input type="radio" name="plan"> Базовый</label>
<label class="plan"><input type="radio" name="plan" checked> Стандарт</label>
<label class="plan"><input type="radio" name="plan"> Премиум</label>
```
Читать: Псевдокласс :checked, Селекторы, псевдоклассы и псевдоэлементы
Продвинутые
Несколько псевдоклассов сразу
Выделите обязательные поля, которые ещё не заполнены. У незаполненного поля виден текст-подсказка placeholder.
```
<form>
  <input name="name" placeholder="Имя" required value="Анна">
  <input name="email" placeholder="Почта" required>
  <input name="phone" placeholder="Телефон">
  <input name="city" placeholder="Город" required>
</form>
```
Читать: Псевдокласс :required
Ультра
Второй абзац
Выделите второй абзац статьи. Подсказка: перед абзацами стоит заголовок.
```
<article>
  <h2>Заголовок</h2>
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
  <p>Третий абзац.</p>
</article>
```
Читать: Псевдокласс :nth-of-type(), Псевдокласс :nth-child()
Ультра
Абзацы карточки, но не цитаты
Выделите абзацы, которые лежат прямо в карточке .card, — абзац внутри цитаты не нужен.
```
<div class="card">
  <p>Описание товара.</p>
  <blockquote><p>«Отличная вещь!» — отзыв покупателя.</p></blockquote>
  <p>Гарантия 2 года.</p>
</div>
```
Читать: Селектор дочерних элементов, Селекторы потомков

Ультра

Два класса сразу

Выделите кнопки, у которых одновременно есть классы btn и primary.

<button class="btn primary">Купить</button>
<button class="btn">Отмена</button>
<button class="btn"><span class="primary">Сохранить</span> черновик</button>
<span class="primary">Подсказка</span>

Читать: Селектор .class, Селекторы потомков

Ультра

Первая карточка

В каждом блоке выделите первую карточку .card. Перед карточками стоит заметка — тоже <div>.

<section>
  <h3>Новинки</h3>
  <div class="note">Обновляется каждую неделю.</div>
  <div class="card">Ноутбук</div>
  <div class="card">Планшет</div>
</section>
<section>
  <h3>Хиты</h3>
  <div class="note">По отзывам покупателей.</div>
  <div class="card">Наушники</div>
  <div class="card">Колонка</div>
</section>

Читать: Псевдокласс :first-of-type, Селектор смежных элементов

Ультра
Регистр в атрибуте
Выделите все ссылки на PDF. Некоторые файлы названы заглавными буквами.
```
<ul>
  <li><a href="/docs/report.pdf">Отчёт</a></li>
  <li><a href="/docs/SCAN.PDF">Скан договора</a></li>
  <li><a href="/docs/Invoice.Pdf">Счёт</a></li>
  <li><a href="/docs/readme.txt">Описание</a></li>
</ul>
```
Читать: Селектор атрибута (заканчивается определёнными символами)

Тренажёр CSS-селекторов

Как пользоваться

Ограничения

Тренажёр

Селектор по типу элемента

Селектор по классу

Селектор по id

Селектор потомков

Дочерний селектор

Смежный селектор

Общий соседний селектор

Группировка селекторов

Наличие атрибута

Значение атрибута

Псевдокласс :first-child

Псевдокласс :nth-child()

Псевдокласс :nth-of-type()

Начало значения атрибута

Конец значения атрибута

Подстрока в значении атрибута

Псевдокласс :last-child

Псевдокласс :nth-last-child()

Псевдокласс :only-child

Псевдокласс :empty

Псевдокласс :last-of-type

Обязательные поля

Псевдокласс :not()

Псевдокласс :has()

:not() со списком

:has() с соседом

:has() и состояние поля

Несколько псевдоклассов сразу

Второй абзац

Абзацы карточки, но не цитаты

Два класса сразу

Первая карточка

Регистр в атрибуте