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

Question

Accepted Answer

## Главная мысль

**Селектор** — паттерн, указывающий, к каким элементам применяется правило.

## Типы (обзор)

- Простые: тип (`h1`), класс (`.card`), id (`#main`), универсальный (`*`)
- Атрибутные: `[type="text"]`
- Псевдоклассы: `:hover`, `:nth-child`
- Псевдоэлементы: `::before`
- Составные и списки: `.a.b`, `h1, h2`
- С комбинаторами: `.a > .b`

```css
article:not(.draft) > p:first-child {
  font-size: 1.125rem;
}
```

От селектора зависит **специфичность** и стоимость матчинга (на практике важнее читаемость и низкая специфичность).

## Итог

Селектор = «к кому»; объявление = «что сделать». Умение читать сложные селекторы обязательно.