Урок 11. Селекторы CSS

📁 Раздел: Основы CSS ⏱️ Время изучения: ~40 мин 🎯 Сложность: Начальная

#p #h1 #a #li #button #input

⚡ Кратко

Селекторы отвечают на вопрос: какие элементы получат правило. На практике чаще всего используют селекторы по тегу, классу, состоянию и вложенности.

О чём этот урок

Селектор — это «адрес» в CSS: левая часть правила, которая отвечает на вопрос «какие элементы получат стиль». В этом уроке разберём все базовые виды селекторов и научимся точно попадать стилем в нужные элементы.

По тегу (p) — базовое оформление всех элементов одного типа.
По классу (.card) и по id (#main) — главный рабочий инструмент и уникальный адрес.
Группировка (h1, h2), потомки (.card p) и дочерние (.menu > li).
Псевдоклассы (:hover, :nth-child) и атрибуты (input[type="email"]).

Результат после урока

Вы объясняете основную идею темы своими словами.
Пишете рабочий HTML/CSS-фрагмент без копирования вслепую.
Понимаете типичные ошибки и умеете их проверить в браузере.

Практика

Оформите все абзацы через селектор p.
Создайте класс .card и примените его к трём блокам.
Добавьте второй класс .important для выделенной карточки.

Навигация