Знакомство с CSS / Продвинутые селекторы [3/15]
×

Продвинутые селекторы [3/15]

К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов.

Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Например, можно создать класс «элементы с ошибкой» и задать ему красный цвет текста. Затем можно добавлять этот класс к любому HTML-тегу: абзацу, заголовку, элементу списка и так далее.

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

<p class="help"></p>
<p class="help error"></p>

В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error.

Селектор с использованием класса задаётся так: .имя_класса. Например:

.help { ... }
.error { ... }

Более подробно об использовании селекторов, рассказано в курсе «Селекторы». Также вы можете посмотреть демонстрацию об использовании псевдокласса :nth-child.


Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Продвинутые селекторы</title> </head> <body> <h1>Селекторы посложнее</h1> <p>К более сложным селекторам можно отнести:</p> <ul> <li>селекторы по классам,</li> <li>селекторы по псевдоклассам,</li> <li>селекторы по тегам,</li> <li>селекторы по id.</li> </ul> <p>Использовать селекторы по классам — это хорошо.</p> </body> </html>
CSS
HTML Academy

Создайте CSS-правило для выделения ошибок и примените его к элементам с ошибками:

  1. Добавьте CSS-правило для класса error со свойством color: red;.
  2. Добавьте класс error к третьему элементу списка.
  3. И ко второму абзацу.

Селекторы детально разобраны в курсе «Селекторы».

Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.