Что такое селектор CSS

Селектор в CSS — это шаблон, который определяет, к каким элементам HTML будут применяться стили.

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

1. По тегу – div { color: red; }
2. По классу – .my-class { font-size: 16px; }
3. По id – #header { background: blue; }
4. По атрибуту – [type="text"] { border: 1px solid gray; }
5. Комбинаторы – div > p (дочерний), div + p (соседний)
6. Псевдоклассы – a:hover { color: green; }
7. Псевдоэлементы – p::first-letter { font-size: 2em; }

Пример:

/* Стили для всех кнопок с классом .btn */
.btn {
  padding: 10px 20px;
  background: #3498db;
}

/* Стили при наведении */
.btn:hover {
  background: #2980b9;
}

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