Селектор — термин в информатике и CSS¶
Селектор — это термин, используемый в информатике для обозначения механизма выбора или идентификации элементов: в CSS селекторы определяют, к каким HTML-элементам применяются стили, в программировании — конструкции для обращения к объектам или компонентам интерфейса, в базах данных — выражения для выборки данных. Понятие также встречается в веб-разработке в контексте JavaScript (селекторы DOM) и в аппаратной тематике (селекторы адресов в процессорах).
¶Селекторы в CSS
В каскадных таблицах стилей (CSS) селектор — это шаблон, описывающий набор элементов документа, к которым применяется набор правил оформления. Селектор определяет, какие элементы будут затронуты описанными в блоке свойствами.
¶Основные типы селекторов CSS
| Тип селектора | Пример | Описание |
|---|---|---|
| По имени тега | p | Выбирает все элементы <p> |
| По классу | .menu | Выбирает элементы с классом menu |
| По идентификатору | #header | Выбирает элемент с id header |
| Универсальный | * | Выбирает все элементы документа |
| По атрибуту | [type="text"] | Выбирает элементы с указанным атрибутом |
| Псевдокласс | :hover, :first-child | Выбирает элементы в определённом состоянии |
| Псевдоэлемент | ::before, ::after | Создаёт виртуальные элементы документа |
¶Комбинаторы
Для уточнения связей между элементами в CSS используются комбинаторы: соседний (+), последующий (~), потомок (пробел), прямой потомок (>). Например, nav ul li a задаёт стиль для всех ссылок внутри списков внутри элемента nav.
¶Специфичность
При конфликте нескольких селекторов, подходящих к одному элементу, применяется правило специфичности: селектор с более высоким приоритетом перекрывает остальные. Идентификатор имеет более высокий вес, чем класс, а класс — более высокий, чем имя тега. Порядок также учитывается: если специфичность равна, применяется правило, описанное позже.
¶Селекторы в JavaScript
В JavaScript для работы с DOM используются методы document.querySelector() и document.querySelectorAll(), принимающие строку с CSS-селектором. Первый возвращает первый подходящий элемент, второй — NodeList всех подходящих элементов. Это позволяет унифицировать подход к выборке элементов: один и тот же селектор используется и для стилей, и для скриптов.
¶Селекторы в веб-разработке за пределами CSS
Термин «селектор» встречается и в других контекстах веб-технологий. В библиотеках jQuery селекторы стали основным способом обращения к элементам ($('.class'), $('#id')), что во многом определило популярность CSS-синтаксиса для выборки DOM-узлов. В шаблонизаторах (Handlebars, Mustache) селекторами называют конструкции выбора данных для отображения.
¶Селекторы в программировании
В объектно-ориентированном программировании термин «селектор» может обозначать метод, возвращающий значение свойства объекта (в отличие от мутатора, изменяющего его). В языках с поддержкой свойств (Python, C#) селектор — это геттер.
В базах данных селектором иногда называют выражение WHERE в запросах SQL, задающее условия отбора записей.
¶Селекторы в аппаратном обеспечении
В архитектуре процессоров селектор — это логическая схема, выбирающая один из нескольких входных сигналов в зависимости от управляющего кода. Мультиплексор (MUX) является типичным примером селектора: он переключает один выход на несколько входов. Селекторы используются в шинах данных, конвейерах и системах адресации памяти.
¶Интересные факты
- Селекторы CSS появились в первой версии спецификации 1996 года и с тех пор значительно расширились: в CSS Selectors Level 4 предлагаются селекторы
:has()(так называемый «селектор родителя»),:is(),:where()и:not()с поддержкой списков. - Селектор
:has()долгое время считался «недостижимым» из-за сложности реализации, но был реализован во всех основных браузерах к 2023 году. - Специфичность CSS-селекторов — одна из частых причин неожиданного поведения стилей и предмет обсуждений в сообществе веб-разработчиков.
Источники:
- Спецификация CSS Selectors Level 4, W3C
- Документация MDN Web Docs: CSS селекторы, JavaScript querySelector
- «Cascading Style Sheets Level 2 Revision 1 (CSS 2.1)», W3C Recommendation