CSS-селектор
CSS-селектор это часть CSS-правила, которая позволяет вам указать, к какому элементу (элементам) применить стиль. Например:
***HTML***
I am inside of a paragraph element.
***CSS*** div < color: green; >p
В первом CSS-правиле я выбираю элемент div и задаю его стиль (цвет текста — зелёный). Во втором CSS-правиле выбираю элемент p и задаю красный цвет текста. Вот как выглядит результат:
Смотрите также
Основные статьи
- Базовые селекторы
- Селекторы по типу elementname
- Селекторы по классу .classname
- Селекторы по ID #idname
- Универсальные селекторы * ns|* *|*
- Атрибутивные селекторы [attr=value]
- Селекторы состояния элементов a:active, a:visited
- Список селекторов A, B
- Adjacent sibling selectors A + B
- General sibling selectors A ~ B
- Child selectors A > B
- Descendant selectors A B
- Псевдоклассы :
- Псевдоэлементы ::
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 12 нояб. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Определение CSS селекторов
CSS селекторы показывают путь, в каком именно теге содержится нужная нам информация. Для их поиска можно воспользоваться специальными программами для браузера, например, SelectorGadget, но они не гарантируют того, что найденные селекторы будут соответствовать вашим задачам.
Поиск нужного элемента
Для начала откройте html код страницы вашего сайта. Сделать это можно кликнув правой кнопкой мыши и выбрав «Показать код элемента»/Inspect (здесь и далее рассматривается работа в браузере Chrome).
Откроется дополнительная панель браузера, где во вкладке Elements отобразится весь html код страницы, загруженный в данный момент. На скриншоте примера выделен тег, на который как раз был клик правой кнопкой мыши.
Следующий этап работы — определить тег, который нам нужен. Сделать это можно несколькими способами:
- кликнуть на конкретную область, нажать на правую кнопку мыши и еще раз выбрать «Показать код элемента»/Inspect;
- переключиться на выбор элемента на странице из консоли, нажав на соответствующую кнопку в консоли браузера;
- через поиск найти тег прямо в html коде. Для этого кликните на любой тег, нажмите сочетание клавиш Ctrl + F и в появившейся строке поиска введите любой текст с сайта. Браузер сам подсветит элемент и рядом напишет количество совпадений на странице. В нашем примере видно, что «записаться» повторяется на странице дважды. При нажатии Enter в строке поиска, браузер переключает к следующему элементу на странице (этот момент поможет вам проверять уникальность селектора на странице либо уточнять, все ли найденные элементы соответствуют вашим задачам, когда их должно быть несколько).
Основные понятия в html коде
Далее разберем, что можно увидеть в html коде и что из этого необходимо знать для сбора данных.
Тег — это элемент, который может состоять из начального и конечного, и содержать внутри себя текст (span в примере — название тега), а может быть одиночным, например
(перенос текста на новую строку).
Атрибут тега — дополнительные параметры тега, которые влияют на содержимое тега, например текст. Например,
— здесь style =» font-size: 200%; text-align: center; « является атрибутом и в нашем примере он сделает размер текста Записаться в два раза крупнее и разместит его по центру.
У одного тега может быть несколько атрибутов, которые будут разделены пробелами, например, так:
здесь два атрибута у одного тега — class и style.
Значение атрибута — атрибут тега состоит из двух элементов: названия и значения.
Цифрой 1 отмечены названия атрибутов, цифрой 2 — их значения. Значений, как и самих атрибутов в теге, может быть несколько, разделяются они также пробелом.
Расположение тегов — в html коде все теги должны располагаться по четким правилам, как матрешки, один в другом либо рядом. У всех тегов есть родители (теги, внутри которых они находятся) и у многих дети. Например, тег ребенок и тега , и тега , а они соответственно его родители:
Правила обозначения CSS селекторов
Использовать для указания на конкретный тег или его содержимое можно практически все элементы html. Далее рассмотрим несколько самых простых вариантов.
Название тега — достаточно просто указать span, div, img, h2 в месте, где нужно прописать селектор, и такой селектор будет учитывать все теги с таким названием на странице. Обычно этого хватает для записи названия страницы, так как обычно оно присутствует в теге h1, который не повторяется. Например, так будет выглядеть настройка записи в свойство события «Посещение страницы» названия страницы:
Атрибуты class и id — это уникальные в нашем случае атрибуты, которые обозначаются не так, как все остальные. Пример:
Здесь селектор class мы запишем как .text или .wrapper2, то есть просто добавим точку перед значением. Если мы хотим указать, что нам нужен тег, где в обязательном порядке присутствуют оба значения, то пропишем так .text.wrapper2 (без пробела).
Значение id должно являться уникальным по правилам html и иметь только одно значение внутри этого тега. Про примеру оно будет обозначаться так #section24.
Вам повезло, если в нужном вам элементе есть id, так как этого как раз будет достаточно для большинства настроек сбора данных.
Другие атрибуты — все остальные атрибуты записываются по единому правилу: название тега[атрибут и его значение]. Например, укажем CSS селектор для тега с конкретной картинкой, используя атрибут scr (ссылку на картинку):
Использования элементов нескольких тегов — иногда атрибуты у нужного тега не уникальны или вовсе отсутствуют. В этих случаях можно использовать атрибуты родителей для определения селектора. Например, мы хотим использовать для сбора данных информацию из тега :
Сначала пробуем ближайшего родителя, то есть тег . Селектор будет выглядеть так: span strong, то есть нам достаточно написать названия тегов в нужном порядке и такой селектор выберет все теги , которые находятся в теге . Аналогично будет выглядеть и с родителей : h2 strong.
Мы можем задать и более четкое условие, что нам нужно все теги , которые находятся непосредственно в теге . Для этого используем символ >: span > strong.
Можно использовать цепочку из названий тегов и их атрибутов, которые в конечном итоге укажут на нужный тег: h2.font-header span span strong.
Несколько CSS селекторов для одной задачи — бывает, что необходимо указать сразу несколько селекторов для сбора одного события или свойства. Для этого необязательно добавлять несколько отдельных настроек в Мастере сбора данных, достаточно прописать через запятую все нужные селекторы. Например, так выглядит настройка клика по элементу, если по факту несколько кнопок на странице обозначают одно и то же, но имеют разные селекторы:
В этом примере все просто: мы имеем ввиду 2 тега, клик на которые будут записываться в хронологию пользователя, как отдельное событие. Первый селектор div.button input[type=»submit»] обозначает, что нам нужны все теги , в которых есть атрибут type=»submit» и они должны являться детьми тега , в котором есть атрибут В упрощенном варианте это будет выглядеть так в html (на самом сайте, конечно, будет больше всего вокруг):
Тут же, через запятую, прописан еще один селектор: все теги с атрибутом >
Проверка уникальности CSS селектора
Уникальность CSS селектора для нас очень важна. Если селектор прописан неверно и он не является уникальным, то сбор данных будет не точным, а значит — бесполезным.
Проверить уникальность можно прямо в браузере через поиск в панеле Elements. Нажмите сочетание клавиш Ctrl + F, и введите в строке поиска найденный вами ранее CSS селектор. Браузер сам подсветит тег, путь к которому вы указали и напишет количество таких совпадений на странице.
В большинстве случаев, совпадение должно быть только одно (будет написано — 1/1). Иногда требуется, чтобы совпадений было несколько, но все они указывали на нужные вам теги, например, свойство «Товары в корзине» подтягивает названия товаров из списка товаров в самой корзине. При настройке такого свойства количество совпадений по селекторам должно равняться реальному количеству товаров в корзине на данный момент.
Как проверить, правильно вы настроили сбор данных в Carrot quest, можно посмотреть в этой статье. При любых сложностях — пишите нам в чат, будем рады помочь.
Поиск элемента по тексту document.querySelector, какой селектор подобрать?
Пытаюсь сделать эмуляцию клика, найдя элемент по тексту в нем. Как правильно написать селектор? Пробовал разные конструкции, наподобие этой:
setTimeout(function() < let link = document.querySelector("//*[text()='Search FragmentX']"); link.click(); >);outerHTML элемента
Full XPath /html/body/div[4]/div[2]/div[1]/div/div/div/div/div[2]/div[1]/form/div[1]/div[1]/div/table/tbody/tr[3]/td/div/label Поиск по ID и прочим стандартным параметрам не вариант, так как они периодически меняются
Отслеживать
задан 22 ноя 2019 в 0:56
57 1 1 серебряный знак 10 10 бронзовых знаков3 ответа 3
Сортировка: Сброс на вариант по умолчанию
let link = document.querySelector(«//*[text()=’Search FragmentX’]»);
Методы querySelector и querySelectorAll понимают только CSS-селекторы.
Для поиска по XPath, нужно использовать document.evaluate .Вот маленькое расширение прототипа элемента, для регистронезависимого поиска по тексту:
HTMLElement.prototype.getNodesByText = function (text) < const expr = `.//*[text()[contains( translate(., 'ABCDEFGHIJKLMNOPQRSTUVWXYZАБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ', 'abcdefghijklmnopqrstuvwxyzабвгдеёжзийклмнопрстуфхцчшщъыьэюя' ), '$' )]]`; /* коммент-костыль */ const nodeSet = document.evaluate(expr, this, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null); return Array.from(< length: nodeSet.snapshotLength >, (v, i) => nodeSet.snapshotItem(i) ); >; // использование document.body.getNodesByText('fragment').forEach( el => el.style.backgroundColor = '#7f7' );Возвращает массив нодов (или пустой массив, в случае когда ничего не найдено).
Вызывать этот метод можно только от элементов — вызов от document не сработает, так как последний не наследует HTMLElement .
Отслеживать
ответ дан 22 ноя 2019 в 7:56
10.9k 1 1 золотой знак 12 12 серебряных знаков 35 35 бронзовых знаковПервый коммент в коде нужен для того чтобы подсветка синтаксиса в сниппете не сходила с ума, видя /* (считает это началом комментария).
22 ноя 2019 в 8:06
Не существует прямого селектора по тексту. Нужно придумывать костыль.
Поиск тупо среди всех элементов на странице запускается через селектор * → document.querySelectorAll(‘*’); — Плохая идея, как минимум потому что если какой-то элемент содержит нужный текст, то и все его родители его включают. Помимо * — нужно будет искать конкретно textNode (nodeType == 3) среди всех childNodes каждого элемента.
Но хорошо, что примерно известно, где может попадаться искомый текст — можно взять все элементы с этим классом (или тегом — тег же не меняется) и отфильтровать по тексту:
let lab = document.querySelectorAll('label'); [. lab].forEach( e => e.onclick = () => e.classList.add('bg') ); // Демо клика /******************************************/ runAutoClicks(); function runAutoClicks() < let x = document.querySelectorAll('.x-form-cb-label'); // или .querySelectorAll('label'); x = Array.from( x ).filter( e =>(/[mt]ake red/i).test( e.textContent ) ); // Взяли все элементы с этим классом, отфильтровали по textContent let i = 0; bubu(); function bubu() < x[i].click(); if( x[++i] )< // - существует ли следующий элемент, заодно сразу увеличивает `i` setTimeout( bubu, 1000 ); // Будет не хорошо, если пойдет одновременный клик по 10+ элементам. >> >label < display: inline-block; width: 60px; height: 60px; cursor: pointer; border: 1px solid red; margin: 5px; >label.bg
Но у событий существует свойство isTrusted . Если создатель сайта захочет — может защищаться от кликов через скрипт, запущенный в браузере:
let test = document.querySelectorAll('.test'); [. test].forEach( (test, i) => < test.addEventListener('click', function(event)< test.style.backgroundColor = "red"; setTimeout(function()< if( event.isTrusted )< test.style.backgroundColor = "green"; >else < console.log(`Элемент номер $, кликнул скрипт.`); > >, 500); >); >); test[0].click(); test[1].click();Почему у нас нет селектора по родителю
Относительно регулярно я вижу дискуссии о том, должен ли CSS включать селектор по родителю и, пока я не выяснил, как работает движок браузера, сам строил предположения по этому поводу.
Как работает CSS Скопировать ссылку
В связи с моей работой я делаю много тестов производительности. Для определения «узких мест» мы используем массу приложений. Например, Google Page Speed, который дает рекомендации по улучшению производительности JavaScript и рендеринга. Прежде чем я перейду к рассмотрению этих рекомендаций, нам нужно разобраться как браузеры работают с CSS
Стиль элемента применяется в момент его создания Скопировать ссылку
Мы часто рассматриваем веб-страницы как полноценные документы, наполненные элементами и содержимым. Между тем, браузеры разработаны так, чтобы обрабатывать документ потоково. Они начинают получать документ с сервера и могут начать его отображать до момента полной загрузки. Каждый узел анализируется и отображается в окне по мере получения.
Взгляните на этот документ:
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum
Lorem Ipsum Test
Браузер начинает сначала и видит элемент . В этот момент времени считается, что этот узел не имеет дочерних узлов. Ничего более не рассматривается. Браузер определяет соответствующий ему обобщенный набор стилей и применяет его к элементу. Какой шрифт, цвет, интерлиньяж? После того, как это все будет выяснено, элемент отображается на экране.
Далее браузер видит элемент со значением атрибута ID content . И снова в этот момент времени браузер считает его пустым. Он не рассматривает другие элементы. Как только браузер рассчитает стиль, элемент отображается на экране. Затем браузер определяет нужно ли перерисовать — стал ли элемент шире или выше? Я подозреваю, что там есть масса других проверок, но изменение ширины и высоты — самый распространенный способ повлиять на отображение родительского узла.
Процесс продолжается, пока браузер не достигнет корневого узла документа.
Вот как выглядит визуализация процессов перерисовки в Firefox:
CSS-селекторы анализируются справа налево Скопировать ссылку
Чтобы определить, применяется ли CSS-правило к определенному элементу, браузер рассматривает селектор справа налево.
Если у вас есть селектор body div#content p < color: #003366; >, то, когда каждый элемент появляется на странице, браузер проверяет, является ли он параграфом. Если да, он начинает подниматься вверх по DOM и ищет со значением атрибута ID равным content . Если он его находит, то продолжает подниматься по DOM пока не найдет .
Таким образом, читая селектор справа налево, браузер значительно быстрее может определить применяется ли правило к элементу. Чтобы определить, какой из селекторов обладает большей производительностью, нужно выяснить, как много узлов придется рассмотреть, чтобы определить, можно ли применить правило к элементу.
Правила Скопировать ссылку
Возвращаясь к Page Speed, давайте рассмотрим несколько его рекомендаций:
- Избегайте селектора по потомку: .content .sidebar ;
- Избегайте селектора по дочернему элементу: .content > .sidebar и селектора по следующему элементу: .content + .sidebar .
Конечно, селекторы по ID — самые быстрые. Проверить применимость селектора #content к рассматриваемому элементу можно очень быстро. Есть у него этот ID или нет? Селекторы по классу практически такие же быстрые, так как нет никаких связанных элементов, которые надо проверять.
Селекторы по потомкам, такие как .content .sidebar — более ресурсоемкие, так как, чтобы определить надо ли применять правило к .sidebar , браузер должен найти .content . Cелектор по дочернему элементу, например, .content > .sidebar , лучше селектора по потомку, так как браузер должен проверить только один элемент вместо множества. (К сожалению, селекторы + и > не поддерживаются IE6. Так что если его поддержка актуальна для вас, то про них придется забыть — прим. переводчика).
Селектор по тегу и универсальный селектор Скопировать ссылку
В рамках рекомендации избегать селекторов по потомку, дочернему или следующему элементам, рекомендуется избегать универсального селектора и селектора по тегу.
Рассмотрим следующий пример:
#content *
Так как в селекторе присутствует ID, то можно подумать, что этот селектор обрабатывается очень быстро. Проблема в том, что браузер обрабатывает селектор справа налево и сперва проверяется универсальный селектор. Для того чтобы браузер мог определить, должен ли цвет текста элемента быть тёмно-синим, надо проверить каждый предок элемента, пока не будет найден предок с атрибутом ID равным content или не будет достигнут корень документа.
И это должно быть сделано для каждого элемента на странице.
Теперь, когда мы понимаем, как элемент обрабатывается, как определяется применимость правил к элементу, давайте рассмотрим пример.
Почему IE долго не поддерживал :last-child Скопировать ссылку
Все жаловались: у всех браузеров, кроме IE, есть поддержка :last-child (она появилась только в IE9!) Некоторые могли подумать насколько же сложнее сделать :last-child , если уже реализован :first-child ?
Давайте представим, что мы — браузер и мы парсим документ-пример, который я приводил ранее.
.module > p:first-child < color: red; >/* Первое правило */ .module > p:last-child < color: blue; >/* Второе правило */Когда мы рассматриваем внутренности первого , мы видим, что там есть параграф. Браузер видит что-то вроде этого:
Lorem Ipsum
Нужно ли применить первое правило к параграфу? Да, это параграф; да, это первый дочерний узел; и, да, это непосредственный потомок элемента с классом module .
Нужно ли применить к этому параграфу второе правило? На данный момент это последний элемент. Но мы могли ещё не загрузить все элементы и не можем быть уверены, что он останется последним.
Вне зависимости от того, как решать эту дилемму, у нас возникает необходимость повторного анализа стилей двух узлов для каждого нового узла, который мы добавляем в DOM. Если я добавлю ещё один параграф следом за первым, мы должны так же повторно перерассчитать стили, которые применяются к предыдущему параграфу.
Как на самом деле это делает браузер? Скопировать ссылку
Я не мог сказать с абсолютной уверенностью, как браузеры парсят :last-child , так что я создал несколько тестов:
- Статическая HTML-страница;
- Рендеринг с паузами в одну секунду.
Первый пример весьма скучен. В любом браузере, включая IE9, всё отображается корректно. Внутри первый элемент красный, а последний синий. Но посмотрите на второй пример, и вы увидите интересные отличия в поведении браузеров.
Второй пример приостанавливается перед добавлением каждого параграфа в .
В Firefox первый параграф изначально отображается синим. Когда загружается второй параграф, первый становится красным и второй — синим. Когда загружается третий параграф, второй отображается цветом по умолчанию и третий отображается синим. Firefox рассматривает каждый элемент, который был загружен в качестве последнего элемента, пока не будет загружен ещё один.
В Safari, Chrome и Opera мы увидим другой подход. Первый параграф красный. Второй отображается чёрным. Последний параграф отображается чёрным, пока браузер не получит закрывающий тег