Селекторы

Что такое селекторы?

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

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

Приоритет селекторов определяет, какие стили будут применены к элементу, если несколько правил CSS конфликтуют между собой. Чем выше приоритет селектора, тем больше его "вес", и тем больше вероятность, что его стили будут применены. Приоритеты селекторов располагаются в следующем порядке (от высшего к низшему):

1. Селектор идентификатора

Селектор идентификатора выбирает элемент по его уникальному атрибуту id. В HTML идентификатор задается с помощью атрибута id="имя", а в CSS обозначается символом #.

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

#header {
  color: red;
}

Приоритет: Селектор идентификатора имеет самый высокий приоритет, так как id должен быть уникальным на странице.

2. Селектор класса, псевдокласса и атрибута

• Селектор класса выбирает элементы по их классу, который задается атрибутом class="имя". В CSS класс обозначается точкой (.).
   

<p class="text">Пример текста</p>

.text {
  font-size: 16px;
}

• Псевдоклассы позволяют выбирать элементы в определенном состоянии, например, при наведении курсора (:hover) или при фокусе (:focus).

a:hover {
  color: blue;
}

• Селектор атрибута выбирает элементы по значению их атрибутов. Например, можно выбрать все ссылки, у которых есть атрибут target="_blank".
  Пример:

a[target="_blank"] {
  color: green;
}

Приоритет: Селекторы класса, псевдокласса и атрибута имеют средний приоритет, ниже, чем у идентификатора, но выше, чем у селектора элемента.

3. Селектор элемента и псевдоэлемента

• Селектор элемента выбирает все элементы по их тегу, например, все параграфы (<p>) или заголовки (<h1>).
  Пример:

p {
  color: black;
}

• Псевдоэлементы позволяют стилизовать определенные части элемента, например, первую букву (::first-letter) или первую строку (::first-line).
  Пример:

p::first-letter {
  font-size: 24px;
}

Приоритет: Селекторы элемента и псевдоэлемента имеют более низкий приоритет по сравнению с селекторами класса и идентификатора.

4. Универсальный селектор и комбинаторы

• Универсальный селектор (*) выбирает все элементы на странице.
  Пример:

* {
  margin: 0;
  padding: 0;
}

• Комбинаторы позволяют выбирать элементы на основе их взаимного расположения в DOM-дереве. Например:

  • Пробел (div p) — выбирает все <p>, которые находятся внутри <div>.

  • Символ > (div > p) — выбирает только те <p>, которые являются прямыми потомками <div>.

  • Символ + (div + p) — выбирает первый <p>, который следует сразу после <div>.

  • Символ ~ (div ~ p) — выбирает все <p>, которые находятся на том же уровне вложенности, что и <div>.

Приоритет: Универсальный селектор и комбинаторы имеют самый низкий приоритет.

Как рассчитывается приоритет?

Приоритет селекторов рассчитывается на основе их "веса". Каждый тип селектора имеет свою значимость:

• Идентификатор (#id) — 100 баллов.

• Класс (.class), псевдокласс (:hover), атрибут ([type="text"]) — 10 баллов.

• Элемент (p), псевдоэлемент (::first-letter) — 1 балл.

• Универсальный селектор (*) и комбинаторы — 0 баллов.

Пример:

#header .text p::first-letter {
  color: red;
}

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

• #header — 100 баллов,

• .text — 10 баллов,

• p — 1 балл,

• ::first-letter — 1 балл.

Итого: 112 баллов. Это значение определяет приоритет данного правила.

Понимание приоритетов селекторов помогает избежать конфликтов стилей и делает код более предсказуемым. Если вы хотите, чтобы стиль точно применился, используйте селекторы с более высоким приоритетом, например, идентификаторы или классы. Однако злоупотреблять идентификаторами не стоит, так как это снижает гибкость кода. Лучше использовать классы и комбинации селекторов.