Селектор

Селектор (от англ. 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 на странице, чтобы ввести в него текст.

Приведем примеры задач, которые решаются с помощью селектора.

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

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

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

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

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

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

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

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

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

Задача: «Сделай все кнопки в форме зелеными, а ссылки в меню — серыми».

Пример селектора: button.submit { background: green; } или nav a { color: gray; }.

Таблица 1. Сравнение основных типов 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 Определённую часть элемента (первую строку, генерируемое содержимое) Для декоративных элементов, типографических эффектов

Автоматизированное тестирование (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-селекторы — основа веб-верстки. Разберем их от простого к сложному.

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

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

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

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

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

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

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

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

Позволяют выбирать элементы не только по имени класса или ID, но и по наличию, значению или части значения любого атрибута.

input[type="email"]

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

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

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

Комбинаторы (контекстные селекторы)

Определяют отношения между элементами для более точного выбора.

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

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

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

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

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

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

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

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

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

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

Другие виды селекторов: 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.

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

Приоритет стабильности над простотой. Самый простой селектор (по тегу div) часто самый ненадежный: верстка может измениться. Лучше использовать классы или комбинации. Идеал для тестов — data-* атрибуты.

Используйте принцип минимальной достаточности. Селектор должен быть достаточно точным, чтобы выбрать нужный элемент, но не переусложненным. Вместо body div.main > ul.list > li:first-child > a часто можно использовать .list-link.

Учитывайте производительность (для CSS и JS). Слишком сложные и глубокие селекторы (например, body > div > div > span) могут замедлять отрисовку страницы. Старайтесь, чтобы селекторы были как можно менее вложенными.

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 является прямым потомком.

Как написать максимально стабильный селектор для автотестов?

Следуйте приоритету (от лучшего к худшему):

  • Специальный data-* атрибут: Попросите разработчиков добавить уникальный data-testid="login-submit-btn". Это самый надежный и независимый от верстки способ.
  • Комбинация атрибутов: Используйте несколько признаков для уникальности, например: button[type='submit'][class*='primary'].
  • Осмысленный класс или имя: Селекторы вроде .cart-checkout-button или input[name='email'] обычно стабильны.
  • Текст как последний вариант: //button[text()='Далее'] уязвим к смене формулировок и переводу. Используйте, если другие способы недоступны.

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

Специфичность — это числовое значение, определяющее, какое CSS-правило будет применено к элементу при конфликте. Рассчитывается как четыре числа (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) — побеждает.