Селектор по тегу

Применяет стили ко всем элементам указанного типа: базовые правила и сбросы.

Уровень: начальный 10 разделов 8 минут

1. Что это и зачем

Применяет стили ко всем элементам указанного типа: базовые правила и сбросы.

Селектор отвечает на вопрос «к каким элементам применить правило». Браузер сопоставляет селектор с деревом DOM и вычисляет специфичность элемента. Чем выше специфичность, тем увереннее правило побеждает в каскаде — это основа, на которой строится вся психология CSS.

Селектор — язык веб-разработчика: удачно выбранный селектор упрощает правила, а неудачный — плодит специфичность и !important.

2. Синтаксис и пример

p { margin: 0 0 1em; }

Запись выше — базовый вариант использования. Обратите внимание, как селектор по тегу вписывается в структуру документа: рядом с другими элементами он ведёт себя по правилам каскада и наследования, которые разобраны в курсе CSS.

3. Нюансы и частые варианты

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

В реальной разметке селектор по тегу встречается в связке с другими тегами и классами: компонентная разметка (БЭМ) и переменные из базового CSS-курса помогают держать такие случаи под контролем без дублирования правил.

4. Как это работает под капотом

Если какое-то свойство ведёт себя неожиданно, откройте DevTools: вкладка Computed показывает, какие правила применились и откуда они пришли, а Box model — геометрию элемента.

5. Совместимость и поддержка

Классические селекторы работают во всех браузерах. Новые (:has, :is, :where, :nth-child(of ...)) требуют свежего браузера — для них есть fallback-варианты, а сами они сокращают дублирование CSS.

Для современных возможностей придерживайтесь правила «fallback армии»: базовое значение — до, новая функция — после, а @supports для совсем свежих свойств.

6. Распространённые ошибки

Глобальные стили по тегам удобны для базовых правил.

Для точечных изменений теговый селектор слишком широк.

7. Практическое задание

Стилизуйте все абзацы через селектор по тегу.

Попробуйте выполнить задание прямо в песочнице ниже — измените код из примера и оцените результат, а затем проверьте его надёжность в DevTools.

p { margin: 0 0 1em; }

8. Как применять в проектах

Селекторы строят всю систему стилей: базовые правила по тегам, состояния через псевдоклассы, вариации через классы, а специфичность держат под контролем, чтобы не плодить !important.

Этот приём работает в связке с остальными: раскладку страниц собирают в уроке Flexbox и Grid, цвет и контраст — в Цвет и контраст, типографику — в Веб-типографика.

9. Чек-лист перед сдачей

специфичность правил управляемая, !important не злоупотребляют;
выбор селектора отражает смысл, а не форму;
новые псевдоклассы используются с fallback;
длинные цепочки разбиты на компонентные классы;
правила группируются: общее и различия идут раздельно;

Прогоните страницу через аудит производительности и доступности (Lighthouse в DevTools), чтобы поймать типовые промахи до публикации.

10. Как закрепить

Прочитав этот мини-урок, закрепите тему на практике: выполните задание, затем пройдитесь по базовым курсам {rel1t} и {rel2t}, а знания подрядчите на странице Тесты HTML и CSS. Если хотите собрать первый настоящий проект — в уроке Практика: лендинг весь процесс разобран по шагам.

← Вернуться к курсам