Селекторы

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

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

  • element — выбирает все элементы определённого типа (например, p).
  • .class — выбирает все элементы с указанным классом.
  • #id — выбирает элемент с указанным идентификатором.
  • element, element — группировка селекторов.
  • element element — потомки элемента.
  • element > element — прямые потомки.
  • element + element — следующий соседний элемент.
  • element ~ element — все соседние элементы.

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

p {
  color: blue;
}

.box {
  background: lightgrey;
}

#main {
  padding: 20px;
}

div > p {
  font-weight: bold;
}

В этом примере:

  • Все параграфы становятся синими.
  • Элементы с классом box имеют серый фон.
  • Элемент с ID main получает внутренние отступы.
  • Все p, которые являются прямыми детьми div, становятся жирными.

Резюме

  • Селекторы позволяют точно выбрать нужные элементы.
  • Комбинация селекторов повышает гибкость стилизации.
  • Использование селекторов упрощает поддержку CSS-кода.