Зачем нужен селектор?

CSS селекторы: назначение и применение

Селектор — это паттерн, используемый для выбора HTML-элементов, к которым будут применены CSS-стили. Селекторы — это основа CSS и необходимы для любого стилизирования веб-страницы.

Основное назначение

Селекторы позволяют:

• Выбирать элементы по различным критериям (тег, класс, ID, атрибут)
• Применять стили только к нужным элементам
• Переиспользовать стили через классы и комбинаторы
• Управлять специфичностью для правильного каскада стилей
• Создавать гибкие и масштабируемые системы стилей

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

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

Выбирает все элементы данного тега:

p {
  color: #333;
  font-size: 16px;
}

Всем параграфам применится заданный стиль.

2. Селектор по классу (класс-селектор)

Выбирает элементы с определённым классом (самый часто используемый):

.button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
}

<button class="button">Нажми меня</button>
<a href="/" class="button">Ссылка</a>

3. Селектор по ID

Выбирает элемент с уникальным ID (используется реже):

#header {
  background-color: #f8f9fa;
  padding: 20px;
}

<div id="header">Заголовок</div>

4. Селектор атрибутов

Выбирает элементы по значению атрибута:

/* Точное совпадение */
input[type="text"] {
  border: 1px solid #ccc;
}

/* Содержит подстроку */
a[href*="example"] {
  color: blue;
}

/* Начинается с */
img[src^="/images"] {
  max-width: 100%;
}

5. Комбинаторы

Объединяют несколько селекторов:

/* Потомок (любой уровень) */
.card p {
  margin: 0;
}

/* Прямой потомок (дочерний элемент) */
.card > p {
  color: #666;
}

/* Соседний элемент (следующий) */
h2 + p {
  margin-top: 0;
}

/* Группировка селекторов */
h1, h2, h3 {
  font-family: 'Segoe UI', sans-serif;
}

Псевдо-классы

Селекторы, которые выбирают элементы в определённых состояниях:

/* При наведении мыши */
a:hover {
  text-decoration: underline;
}

/* Активный (нажата) ссылка */
a:active {
  color: red;
}

/* Посещённая ссылка */
a:visited {
  color: purple;
}

/* Первый элемент в группе */
li:first-child {
  font-weight: bold;
}

/* Элемент по порядку */
li:nth-child(2n) {
  background-color: #f5f5f5;
}

/* Элемент с фокусом (для форм) */
input:focus {
  outline: 2px solid #007bff;
}

/* Активное состояние элемента */
.tab.active {
  border-bottom: 2px solid #007bff;
}

Псевдо-элементы

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

/* Первая строка текста */
p::first-line {
  font-weight: bold;
}

/* Первая буква */
p::first-letter {
  font-size: 2em;
}

/* Перед элементом */
.icon::before {
  content: "→";
}

/* После элемента */
.required::after {
  content: " *";
  color: red;
}

Практические примеры в реальных проектах

1. Стилизация кнопок с разными вариантами

/* Базовая кнопка */
.btn {
  padding: 10px 16px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

/* Вариант кнопки */
.btn.primary {
  background-color: #007bff;
  color: white;
}

.btn.secondary {
  background-color: #6c757d;
  color: white;
}

/* Состояния */
.btn:hover {
  opacity: 0.9;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

2. Таблица со строками-зебра

table tr:nth-child(odd) {
  background-color: white;
}

table tr:nth-child(even) {
  background-color: #f9f9f9;
}

table tr:hover {
  background-color: #f0f0f0;
}

3. Адаптивная сетка с Tailwind-подобным подходом

/* На мобильных: 1 колонка */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* На планшетах: 2 колонки */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* На рабочих столах: 3 колонки */
@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Специфичность селекторов

Важно понимать, что селекторы имеют разный приоритет:

/* Низкая специфичность (10 очков) */
p { color: blue; }

/* Средняя (100 очков) */
.text { color: green; }

/* Высокая (1000 очков) */
#content { color: red; }

/* Очень высокая (inline styles) */
<p style="color: yellow;">Этот текст будет жёлтым</p>

Основной принцип: более специфичный селектор переопределит менее специфичный, даже если менее специфичный идёт позже в файле.

Селекторы в JavaScript

Те же селекторы используются и в JavaScript для поиска элементов:

// По селектору CSS
const element = document.querySelector('.button');
const elements = document.querySelectorAll('p.text');

// По ID
const header = document.getElementById('header');

// По классу
const buttons = document.getElementsByClassName('button');

Вывод

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