Загрузка...

Селекторы CSS

У каждого CSS-правила две задачи: определить, к чему применять стили, и как их задать. «Как» вы уже отработали на свойствах, значениях и единицах измерения. Это занятие посвящено «к чему» — селектору, с которого начинается правило.

Что такое CSS-селекторы?

Селектор — это шаблон, по которому браузер находит HTML-элементы, чтобы применить к ним блок деклараций. Если селектор подходит элементу на странице, этот элемент получает все стили из фигурных скобок { }.

Основные типы селекторов: обзор

Начните с этих четырёх. Комбинаторы, атрибуты и псевдоклассы появятся в следующих занятиях, а пока уверенно освойте селекторы элемента, class, id и *.

📊 Базовые CSS-селекторы

Селектор Что выбирает Пример
Элемент (тип) Все элементы с таким именем тега p { … }
Class Элементы с таким атрибутом class .card { … }
Id Единственный элемент с таким id #hero { … }
Универсальный Вообще все элементы (применять осторожно) * { … }

Селекторы элемента (типа)

Селектор элемента — это просто имя тега, без точки и без решётки. h1 оформляет каждый <h1> на странице, p — каждый абзац. Это самый широкий повседневный инструмент, когда нужно задать единый базовый вид для тега.

Селекторы элемента для заголовков и абзацев

css
CSS Code 
h1 {
color: #0f766e;
font-size: 2rem;
}

p {
color: #334155;
line-height: 1.6;
}

Когда удобны селекторы типа

Используйте их для общих настроек сайта: цвета текста в body, жирности заголовков, отступов у списков. Если особый вид нужен только некоторым абзацам, лучше добавьте class, чем менять оформление всех p.

Селекторы class

Селектор class начинается с точки (.), за которой идёт имя класса. В HTML элементы помечаются так: class="card". Один и тот же класс можно ставить на сколько угодно элементов — поэтому именно классы лежат в основе многократно используемого дизайна.

Селектор class для переиспользуемых карточек

css
CSS Code 
.card {
background: #f8fafc;
border: 1px solid #cbd5e1;
padding: 1rem;
border-radius: 8px;
}

Имя класса в HTML должно совпадать

CSS-правило .card оформит только те элементы, у которых действительно есть class="card" (или несколько классов, среди которых card). Написание должно совпадать до буквы: .Card и .card — разные селекторы.

Селекторы id

Селектор id начинается с решётки (#) и имени идентификатора. В HTML пишут id="hero". Идентификатор должен быть уникальным на странице — только у одного элемента. Для большей части стилей выбирайте классы, а id оставьте для единственного по-настоящему особого блока.

Селектор id для уникального баннера

css
CSS Code 
#hero {
min-height: 40vh;
background: #0f172a;
color: #f8fafc;
padding: 2rem;
}

Универсальный селектор (*)

Универсальный селектор * подходит любому элементу. Иногда его используют для простого сброса (например, чтобы задать box-sizing), но если применить через него цвета или отступы ко всему подряд, можно испортить вёрстку. Для обычного оформления выбирайте более точные селекторы.

Аккуратное использование универсального селектора

css
CSS Code 
* {
box-sizing: border-box;
}

Селекторы вместе на одной странице

В настоящих таблицах стилей типы селекторов смешиваются: базовые настройки задаются селекторами элементов, повторяющиеся блоки — классами, а редкие уникальные цели — идентификаторами. Эта небольшая таблица показывает привычный подход: не каждому правилу нужен id.

Небольшая смесь типов селекторов на странице

css
CSS Code 
body {
font-family: Georgia, serif;
margin: 0;
}

.card {
max-width: 28rem;
margin: 1rem;
}

#hero {
padding: 2rem;
}

Class или id: практическая привычка

  • Для кнопок, карточек, ссылок навигации и всего, что можно использовать повторно, выбирайте class
  • Id нужен, только когда цель действительно одна (баннер страницы, главное поле поиска)
  • Не придумывайте новый id для каждого оформленного блока: это мешает повторному использованию и создаст проблемы в уроках про каскад

Попробуйте сами

  1. Добавьте на тренировочную страницу <h1>, два <p>, <div class="card"> и <section id="hero">.
  2. Напишите правило для элементов h1 и p.
  3. Оформите .card: внутренний отступ (padding), светлый фон и рамка (border).
  4. Оформите #hero: тёмный фон и светлый текст.
  5. По желанию: добавьте * { box-sizing: border-box; } и заметьте, что padding внутри карточки стал вести себя предсказуемее.

Частые ошибки

  • Написать card { } вместо .card { }: без точки браузер ищет элемент с именем card, а такого в HTML нет
  • Написать hero { } вместо #hero { }: потеряна решётка
  • В HTML указан class="card", а в CSS написано .crd: совпадения нет, значит, стилей тоже нет
  • Один и тот же id у нескольких элементов: HTML становится невалидным, а выбор элементов — непредсказуемым
  • Использовать только селекторы типа для единичного оформления: меняются все p или div, хотя вы хотели изменить один блок

Итоги

  • Селекторы определяют, какие HTML-элементы получат стили правила
  • Селектор элемента — это имя тега (h1, p)
  • Селектор class начинается с точки (.card) и сопоставляется с атрибутом class в HTML
  • Селектор id начинается с решётки (#hero) и должен выбирать один уникальный элемент
  • * выбирает всё: полезен для аккуратного сброса, но не для оформления всей страницы
  • Для переиспользуемых элементов интерфейса берите классы; id используйте редко и только для уникальных

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок