Что такое селектор в CSS
Селектор (от англ. select — «выбирать») — это шаблон, который сообщает браузеру, к каким элементам веб-страницы применять заданные стили. Синтаксис прост:
селектор {
свойство1: значение1;
свойство2: значение2;
}
Например:
body {
background-image: url(image.gif);
font-size: 18px;
}
Здесь body — селектор, background-image и font-size, свойства, а url(image.gif) и 18px — их значения.
«Селектор ФСИН» как метафора строгости
Программисты любят иронизировать: если обычный селектор «просто выбирает», то «селектор ФСИН» — выбирает жёстко, без права на апелляцию. На практике это означает использование:
- максимально специфичных селекторов;
- комбинаторов и псевдоклассов, сводящих количество «попаданий» к минимуму;
- !important (редко, но бывает).
2.1 Пример «селектора ФСИН»
background: #d32f2f !important; }
Этот «карательный» селектор выбирает кнопку .btn внутри третьей карточки при наведении, исключая заблокированные кнопки. Специфичность зашкаливает — стиль «закроет» почти любые другие.
Типы CSS-селекторов, которые могут быть «жёсткими»
3.1 Селектор по тегу
p { line-height: 1.5em; } /* 1 строка отступа ≈ 1.5em */
3.2 Селектор по классу
.nav__link--active { color: #c62828; }
3.3 Селектор по идентификатору
#login-form { max-width: 320px; }
3.4 Комбинаторы
- потомок
article p - дочерний
ul > li - соседний
h2 + p - общий сосед
h2 ~ p
3.5 Псевдоклассы и псевдоэлементы
li:nth-child(2), второй элемент списка (так как n начинается с 0: n=0 → 1-й, n=1 → 2-й).::before,::after.
Специфичность: «вес» селектора
| Тип селектора | «Вес» | Пример |
|---|---|---|
| Inline-стиль | 1000 | style=»color:red» |
| ID | 100 | #main {} |
| Класс/псевдокласс | 10 | .btn:hover {} |
| Тег | 1 | body {} |
«ФСИНовский» селектор стремится к максимальному весу, комбинируя всё вышеперечисленное.
Практический чек-лист: как писать «жёсткие» селекторы без вреда
- Избегайте чрезмерной специфичности без необходимости.
- Используйте БЭМ или другую методологию, чтобы снизить вес.
- Проверяйте специфичность специальными калькуляторами (CSS Specificity Calculator).
- Не злоупотребляйте
!important, иначе «селектор ФСИН» превратится в «селектор хаос».
Термин «селектор ФСИН», это шутливое, но образное название для чрезвычайно точных и специфичных CSS-селекторов, которые выбирают элементы «без скидок». Пользуйтесь этой «силой» осознанно: точность важна, но читаемость и поддерживаемость кода, не менее важны.
, 06:08