CSS Селекторы

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

Типы CSS селекторов

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

Комбинированные селекторы

• Дочерний селектор (E > F) — выбирает только прямых потомков.
  Пример: div > p выбирает абзацы, которые являются прямыми потомками div.
• Смежный селектор (E + F) — выбирает элемент, идущий сразу после указанного.
  Пример: h1 + p выбирает первый абзац сразу после заголовка h1.
• Общий соседний селектор (E ~ F) — выбирает все элементы, идущие после указанного.
  Пример: h1 ~ p выбирает все абзацы, следующие за h1.

Атрибутные селекторы

Пример использования селекторов

/* Селектор по тегу */
p {
  color: red;
}

/* Селектор по классу */
.button {
  background-color: blue;
}

/* Селектор по ID */
#header {
  font-size: 24px;
}

/* Атрибутный селектор */
input[type="text"] {
  border: 1px solid #ccc;
}