Теория
Теория

Продвинутые селекторы

Это задание архивной части. Перейдите по ссылке, чтобы пройти актуальную часть.

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

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

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

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

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

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

.help { … }
.error { … }

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

index.html
style.css

HTML

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

CSS

ЗадачиВыполнено

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

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

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

Продвинутые селекторы

Вход

Регистрация

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

Крутим, кодим, празднуем!