Селекторы CSS: универсальный, теговый, класса, ID, атрибута, псевдоклассы и псевдоэлементы

🔍 Введение: Что такое селекторы?

Селекторы — это кирпичики, из которых строится внешний вид сайта. Они указывают браузеру, какие элементы нужно стилизовать. Без селекторов CSS был бы бесполезен — как маляр без кисти!

Сегодня разберём 7 типов селекторов, которые покрывают 99% задач вёрстки. Поехали!

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

Самый «широкий» селектор — применяет стили ко всем элементам на странице. Полезен для сброса отступов или изменения box model.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

⚠️ Используйте осторожно! Он может замедлить отрисовку страницы на сложных проектах.

📄 Селектор по тегу (div, p, h1)

Стилизует все элементы указанного типа. Отлично подходит для базового оформления:

/* Все заголовки второго уровня станут синими */
h2 {
  color: navy;
}

/* Все параграфы получат отступ снизу */
p {
  margin-bottom: 1em;
}

🏷️ Селектор по классу (.class)

Самый популярный тип! Позволяет стилизовать элементы с указанным class (может повторяться на странице):

<!-- HTML -->
<button class="btn btn-primary">Купить</button>

/* CSS */
.btn {
  padding: 12px 24px;
}

.btn-primary {
  background-color: coral;
}

🔥 Классы — главный инструмент компонентного подхода. Совет от Данилы Бежина: называйте классы по функции, а не по внешнему виду (.alert, а не .red-box).

🔑 Селектор по ID (#id)

Стилизует элемент с конкретным id (должен быть уникальным на странице):

#header {
  background: linear-gradient(to right, #ff8a00, #da1b60);
}

⚠️ ID имеет высшую специфичность. Переопределить такие стили сложно — лучше использовать классы, если не работаете с JavaScript.

🧩 Селекторы атрибутов ([attr])

Мощный инструмент для стилизации элементов по их атрибутам:

/* Все ссылки с target="_blank" */
a[target="_blank"] {
  color: tomato;
}

/* Картинки без alt-текста (плохая практика!) */
img:not([alt]) {
  outline: 3px dashed red;
}

Работает с разными операторами:

• [href^="https"] — начинается с...
• [href$=".pdf"] — заканчивается на...
• [class*="icon-"] — содержит подстроку...

🎭 Псевдоклассы (:hover, :nth-child)

Добавляют стили в определённом состоянии элемента:

/* При наведении */
button:hover {
  transform: translateY(-2px);
}

/* Чётные строки таблицы */
tr:nth-child(even) {
  background: #f8f8f8;
}

/* Первая буква параграфа */
p::first-letter {
  font-size: 150%;
}

💡 Псевдоклассы часто используют для интерактивности. Например, :focus для полей ввода или :checked для чекбоксов.

✨ Псевдоэлементы (::before, ::after)

Создают виртуальные элементы, которые можно стилизовать:

/* Добавляет иконку перед ссылкой */
a::before {
  content: "→";
  margin-right: 5px;
}

/* Стили для выделенного текста */
::selection {
  background: gold;
  color: black;
}

🔥 content обязателен для ::before и ::after! Даже если это пустая строка: content: "".

🥊 Специфичность: кто победит?

Когда несколько правил применяются к одному элементу, браузер использует специфичность:

1. !important (избегайте!)
2. Инлайн-стили (style="...")
3. ID (#id)
4. Классы (.class), атрибуты ([type]), псевдоклассы (:hover)
5. Теги (div), псевдоэлементы (::before)

/* Специфичность: 0-1-1 (id=0, class=1, tag=1) */
nav .active {
  color: red;
}

/* Специфичность: 0-0-2 (тегов больше!) */
ul li a {
  color: blue; /* Переопределит предыдущее правило */
}

🧪 Практика: собираем компонент

Давайте создадим кнопку, используя разные селекторы:

<button class="btn" data-variant="primary">Нажми меня</button>

/* Базовый стиль (класс) */
.btn {
  padding: 12px 24px;
  border: none;
}

/* Модификатор (атрибут) */
[data-variant="primary"] {
  background: linear-gradient(to right, #ff5e62, #ff9966);
}

/* Состояние (псевдокласс) */
.btn:hover {
  opacity: 0.9;
}

/* Дополнительный элемент (псевдоэлемент) */
.btn::after {
  content: "→";
  margin-left: 8px;
}

🚀 Что дальше?

Теперь вы знаете все основные селекторы! Для углублённого изучения:

• Комбинаторы (>, +, ~)
• CSS-переменные
• Современные псевдоклассы (:is, :where)

Попробуйте применить эти знания в своём проекте — начните с малого и постепенно усложняйте стили!