Селектор

Селектор (от англ. selector — «выбирающий») — это элемент синтаксиса, используемый для точного указания и выбора конкретных компонентов в коде, данных или интерфейсе. Термин встречается в контексте веб-разработки, UI/UX-дизайна и автоматизации бизнес-процессов.

Краткое содержание статьи:

Что такое селектор (selector)

Селектор (selector) — это шаблон для точного выбора одного или нескольких элементов из множества по заданному правилу. Другими словами это инструкция, которая говорит системе: «Найди мне именно эти объекты». Например, в веб-разработке селектор — это шаблон для выбора элементов веб‑страницы (отдельных тегов или их групп), чтобы применить к ним стили (в CSS) или выполнить с ними действия (в JavaScript).

В CSS: .button { color: blue; } — селектор .button выбирает все элементы с классом button, чтобы покрасить их в синий.

В SQL: SELECT * FROM users WHERE city='Москва' — часть WHERE city='Москва' является селектором, выбирающим пользователей из Москвы.

В Selenium: //input[@name='email'] — селектор находит поле для ввода email на странице, чтобы ввести в него текст.

Что такое Selector (селектор)

Какие задачи решаются с помощью селектора?

1. У вас есть список всех сотрудников компании:

  • Селектор «отдел = бухгалтерия» выберет всех бухгалтеров.
  • Селектор «табельный номер = 145» выберет одного конкретного сотрудника.
  • Селектор «стаж > 5 лет» выберет всех опытных сотрудников.

2. Вам нужно найти документы в вашем электронном архиве: все договоры за 2025 год или один документ с определенным номером. Чтобы это сделать, вы составляете инструкцию: «Найти все договоры с периодом подписания с 1 января по 31 декабря 2025» или «Найти документ с кодом Х-123».

Таким образом, селектор — это инструкция для точного поиска, которая указывает программе, компьютеру или движку браузера, с каким конкретным элементом или группой элементов нужно работать. Независимо от контекста его функция — точный выбор нужного элемента из множества. 

Где используют селекторы?

Селекторы применяются там, где требуется точная выборка: в веб-разработке (CSS, JavaScript), автоматизированном тестировании (Selenium, Playwright), языках запросов (XPath, SQL), обработке данных (регулярные выражения, фильтрация в Excel) и других сферах. Это междисциплинарное понятие.

Веб-разработка : CSS-селекторы

Селектор в CSS — это правило или шаблон, которое указывает браузеру, к каким именно элементам на веб-странице (например, кнопкам, заголовкам, изображениям) нужно применить определённые стили.

CSS-селекторы отвечают на вопрос: «Какие элементы стилизовать?». Прежде чем задать цвет, размер или отступ, нужно точно указать элемент.

  • Задача: «Сделай все кнопки в форме зелеными, а ссылки в меню — серыми».
  • Пример селектора: button.submit { background: green; } или nav a { color: gray; }.

Автоматизированное тестирование (Selenium, Playwright)

Для автоматизации тестов роботу нужно находить элементы на веб-странице, чтобы кликнуть по ним, ввести текст или считать данные. Селектор здесь — это уникальный идентификатор элемента для робота.

  • Задача: «Найди поле для логина, введи "user123"».
  • Пример селектора: В Selenium можно использовать CSS: input#login или XPath: //input[@name='username'].

Языки запросов (SQL, XPath)

Принцип селективности лежит в основе языков запросов. Например:

  • SQL. Запрос SELECT * FROM users WHERE age > 25; — здесь часть WHERE age > 25 действует как селектор, выбирающий строки из таблицы по условию.
  • XPath — это язык запросов к XML и HTML-документам. По сути, это мощные и сложные селекторы для обхода дерева документа.

Программирование (jQuery, JavaScript)

Для работы с элементами страницы (DOM) в JavaScript используются методы поиска, куда передаются селекторы.

  • Задача на JS: «Найди все незаполненные поля формы и подсвети их красным».
  • Пример селектора: document.querySelectorAll('input:invalid') или в jQuery: $('input:empty').addClass('error').

Типы и синтаксис CSS-селекторов: разбор с примерами

CSS селекторы — это специальные инструкции или шаблоны, с помощью которых браузер определяет, к каким именно элементам HTML-страницы следует применить заданные стили оформления. Это основа веб-верстки. Разберем их от простого к сложному.

Базовые селекторы: по тегу, классу, ID

Селектор по тегу (элементу): выбирает все элементы данного типа. Самый широкий охват.

p — выберет все абзацы <p> на странице.

Селектор по классу (class): выбирает элементы с указанным классом. Самый часто используемый и гибкий тип.

.button — выберет все элементы с class="button" ( <div class="button">, <a class="button">).

Селектор по ID: выбирает элемент с уникальным идентификатором. Должен быть один на странице.

#header — выберет единственный элемент с id="header".

Селекторы атрибутов

Селектор атрибутов — это способ выбора HTML-элементов на основе наличия у них определённого атрибута или его значения. 

input[type="email"]

— выберет все поля ввода для email.

a[href^="https://"]

— выберет все ссылки, адрес которых начинается с https://.

Контекстные селекторы

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

Пробел (потомок): div .text — выберет любые элементы с классом .text, которые находятся внутри <div> (на любом уровне вложенности).

> (дочерний элемент): ul > li — выберет только те <li>, которые являются прямыми детьми <ul> (не внуками).

Псевдоклассы и псевдоэлементы

Псевдоклассы выбирают элементы в определенном состоянии.

a:hover — стилизует ссылку при наведении курсора.

tr:nth-child(odd) — выбирает все нечетные строки таблицы.

Псевдоэлементы позволяют стилизовать определенную часть элемента.

p::first-line — стилизует первую строку абзаца.

.price::before { content: "₽"; }

— добавит знак рубля перед текстом в элементе с классом .price.

Типы селекторов CSS: общая таблица

Тип селектора Пример синтаксиса Что выбирает? Где используют
По тегу p, div, a Все элементы данного типа на странице Для глобальных, базовых стилей (сброс отступов у списков, стили ссылок)
По классу .button, .active, .menu-item Все элементы, у которых в атрибуте class есть указанное значение Основной инструмент стилизации. Для многократно используемых стилей
По ID #header, #submit-form Единственный элемент с указанным уникальным id Для якорных ссылок, строго уникальных элементов макета. Осторожно в CSS
По атрибуту [type="text"], [href^="https"] Элементы, имеющие данный атрибут (или его конкретное значение) Для стилизации полей форм, ссылок с особыми протоколами, элементов данных
Универсальный (*) *, div * Все элементы (или все внутри указанного контекста) Для глобальных правил (например, box-sizing), отладки
Псевдокласс :hover, :nth-child(odd), :focus Элементы в определённом состоянии или положении Для интерактивности (наведение, фокус), чередования строк таблиц
Псевдоэлемент ::before, ::first-line Определённую часть элемента (первую строку, генерируемое содержимое) Для декоративных элементов, типографических эффектов

Другие виды селекторов: XPath, Selenium

Селекторы XPath: синтаксис и отличия от CSS

XPath (XML Path Language) — мощный язык для навигации по DOM. Он может искать элементы по тексту, двигаться вверх по дереву (к родителям) и делать сложные выборки.

Пример:

//div[@id='content']//p[contains(text(),'важный')]

— найдет все абзацы <p> внутри <div id="content">, которые содержат слово «важный».

Отличие от CSS: CSS читается проще и быстрее для базовых задач. XPath мощнее для сложных запросов, но может быть медленнее и сложнее в поддержке.

Селекторы для автоматизации тестов (Selenium, Playwright)

Помимо CSS и XPath, современные фреймворки предлагают специальные удобные локаторы:

По тексту: page.getByText('Submit') (Playwright).

По test-id (рекомендованный способ): data-testid="login-button". Разработчики специально добавляют такие атрибуты для стабильности тестов. Селектор: [data-testid="login-button"].

Селекторы в JavaScript (querySelector, jQuery)

Нативный JavaScript для выбора элементов использует методы querySelector (первый найденный) и querySelectorAll (все элементы), принимающие строку с CSS-селектором.

document.querySelector('.active') — найдет первый элемент с классом active.

Как выбрать селектор в веб-разработке?

  1. Основной принцип — приоритет стабильности над простотой. Самый простой селектор (по тегу div) часто самый ненадежный: верстка может измениться. Лучше использовать классы или комбинации. Для тестов — data-* атрибуты.
  2. Используйте принцип минимальной достаточности. Селектор должен быть достаточно точным, чтобы выбрать нужный элемент, но не переусложненным. Вместо body div.main > ul.list > li:first-child > a часто можно использовать .list-link.
  3. Учитывайте производительность (для CSS и JS). Слишком сложные и глубокие селекторы (например, body > div > div > span) могут замедлять отрисовку страницы. Старайтесь, чтобы селекторы были как можно менее вложенными.

Заключение

Селектор — это механизм точной выборки элементов из структурированной среды (таблицы БД, XML-документа) по заданному правилу. В веб-разработке селекторы используются для:

  • CSS — привязки стилей к элементам (классы, ID, атрибуты, псевдоклассы);
  • JavaScript — поиска узлов через querySelector / querySelectorAll;
  • Автотестов — локации элементов (CSS, XPath, data-testid);
  • XPath — сложной навигации по DOM (поиск по тексту, движению вверх/вниз).

ELMA365

Селектор: частые вопросы (FAQ)

Что такое селектор простыми словами?

Селектор — это простыми словами инструкция для поиска. Представьте, что вам нужно найти в огромном списке контактов всех друзей из Москвы. Правило «город = Москва» и будет селектором. Селектор в программировании делает то же самое: он находит нужные элементы (например, все красные кнопки на сайте или строки в базе данных), чтобы с ними можно было что-то сделать.

Что лучше использовать для тестов: CSS-селекторы или XPath?

Это зависит от задачи. CSS-селекторы рекомендуются для большинства случаев: они читаемее, работают быстрее и их синтаксис знаком фронтенд-разработчикам. Используйте их для выборки по классам, атрибутам и простой иерархии. XPath стоит выбрать, когда нужна сложная логика: поиск по точному тексту (text()='Сохранить'), навигация вверх к родительским элементам или использование сложных условий (and, or). Главное правило — избегать в XPath фрагментов, зависящих от абсолютного положения в DOM (например, /html/body/div[5]/div[1]), так как они очень хрупкие.

В чем главное отличие селектора по классу от селектора по ID?

Ключевых отличий два:

  1. Уникальность: ID должен быть единственным на всей странице (например, #header). Класс (.menu-item) может присваиваться множеству элементов.
  2. Специфичность (в CSS): Стили, примененные через селектор по ID, имеют более высокий приоритет и "перебивают" стили, заданные через класс (за исключением случаев с !important).

Для стилизации всегда предпочитайте классы. Для якорных ссылок или скриптов, которым нужна гарантированно одна цель, можно использовать ID.

Почему селектор не находит элемент?

Это самая частая проблема. Вот чек-лист для диагностики:

  1. Динамический контент: Элемент может подгружаться JavaScriptом с задержкой. Добавьте ожидание перед использованием селектора в автотестах.
  2. Изменчивость атрибутов: Части классов или ID (например, button_123_random) могут генерироваться динамически. Используйте частичные совпадения в селекторах: [class*="button_"] в CSS или contains(@id, 'button') в XPath.
  3. Неправильный контекст: Убедитесь, что вы ищете в правильном фрейме или тени (Shadow DOM). Также проверьте вложенность: селектор div .text найдет .text внутри любого div, а div > .text — только если .text является прямым потомком.

Что такое специфичность CSS-селектора и как ее рассчитать?

Специфичность CSS-селектора — это система весов или числовой приоритет, который определяет, какое из нескольких конкурирующих правил будет применено к элементу: чем специфичнее селектор (например, ID весит больше, чем класс), тем выше его приоритет при конфликте стилей. Рассчитывается как четыре числа (a, b, c, d):

a = 1 для стилей внутри style="" (инлайн).

b — количество ID в селекторе (#header).

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

d — количество тегов (div) и псевдоэлементов (::before).

Пример: селектор #nav .menu li.active имеет специфичность 0,1,2,1 (0 инлайн, 1 ID, 2 класса, 1 тег). Правило с большим числом в старшем разряде (сравнение идет слева направо: a → b → c → d) — побеждает.