Что такое селекторы в css

Селекторы CSS

В этой статье мы разберём различные виды селекторов. У каждого из них своя задача и каждый срабатывает лишь при соблюдении условий, и по этим условиям делятся на несколько видов:

1) Обычный селектор.

2) Контекстный селектор.

3) Селектор ID.

4) Селектор CLASS.

5) Селектор параметров.

Обсуждать обычный селектор мы не будем, потому что, во-первых, мы его обсуждали, а, во-вторых, это обычный HTML-тег, поэтому тут и сказать нечего.

А теперь подробно разберём контекстные селекторы, так как их используют, пожалуй, чаще всего. Они нужны для того, чтобы к элементу применялся стиль при условии, что данный элемент лежит внутри тега, который лежит внутри другого тега. Звучит запутанно, не спорю, но давайте разберёмся на примере

Элемент, в данном случае — это текст "заголовок в контейнере" лежит в теге <h2>, который в свою очередь лежит в теге <div>. Этот пример поясняет то, что я написал чуть выше. А теперь вернёмся к контекстным селекторам. Синтаксис следующий:

тег1 тег2 <
свойство1: значение1;
свойство2: значение2;
>

И работает это так: если тег2 находится внутри тега 1, то элементы внутри тега2 примут свойства1 и свойства2 со значениями значение1 и значение2. А теперь пример CSS для примера выше.

div h2 <
font-weight: bold;
>

Такой стиль будет применён к примеру выше и "заголовок в контейнере" станет жирным. А если будет написано просто:

То стиль применён к этому элементу не будет, ведь он не находится внутри тега <div>.

Вопрос: для чего же нужны контекстные селекторы? Их Вы будете вынуждены использовать многократно, ввиду того, что на Вашей странице наверняка будет множество повторяющихся тегов (<div>, <p>, <tr>, <td>, <table> и прочие), и, разумеется, Вы захотите, чтобы у них был далеко не всегда одинаковый внешний вид. И вот тут и придут на помощь контекстные селекторы.

Селекторы ID тоже очень распространены. Они позволяют задать уникальный элемент на странице, и синтаксис объявления этого селектора следующий:

имятега#имя <
свойство1: значение1;
свойство2: значение2;
>

Теперь если тегу "имятега" имеет атрибут "id" со значением "имя", то к элементам внутри тега "имятега" будет применён стиль.

Если "имятега" отсутствует (то есть селектор начинается с символа "#"), то тогда данный стиль может быть применён к любым тегам, у которых стоит атрибут "id" в значении "имя".

А теперь пример:

И теперь HTML-код, к которому будет применён данный стиль:

Как видите, всё очень просто, однако есть одно большое НО! Используйте ОДИН идентификатор только ОДИН РАЗ на странице! Например, вот так писать нельзя:

<p >Красный текст</p>
<p >Ещё один красный текст</p>

В таких случаях надо создавать два идентификатора вот так:

<p >Красный текст</p>
<p >Ещё один красный текст</p>

Вот теперь будет правильно. Кстати, обратите внимание на "запятую" в описании селектора. Это частый приём для сокращения количества строк в стиле. Если у Вас два или более элемента имеют один и тот же стиль, то Вы можете через запятую перечислить все селекторы, а потом сразу для всех написать соответствующий стиль, как в примере выше.

Теперь о селекторе CLASS. Он очень похож на селектор ID, но его "имя" может использоваться несколько раз на странице. Общий синтаксис этого селектора следующий:

имятега.имя <
свойство1: значение1;
свойство2: значение2;
>

Таким образом, если у тега "имятега" стоит атрибут "class" со значением "имя", то к элементам внутри будет применён данный стиль.

Аналогично, с селектором ID, если "имятега" не задано (то есть описание селектора начинается с символа "."), то данный стиль может быть присвоен любым элементам.

А теперь пример:

И HTML-код под этот стиль:

<p >Красный текст</p>
<p >Ещё один красный текст</p>

Вновь всё очень просто. Теперь встаёт вопрос: чем же тогда лучше селектор ID? А лучше он тем, что к данным элементам очень удобное обращение через, например, JavaScript. Поэтому очень удобно задать именно ID, при условии, что такой элемент всего один на странице, то есть он является уникальным.

И последний тип селекторов CSS — это селектор параметров. Не очень часто используют, но в некоторых случаях он является практически незаменимым. Я, надеюсь, что Вы заметили, что вид многих тегов зависит от их атрибутов. Ярким примеров является тег <input>, который может быть и кнопкой, и переключателем, и текстовым полем. Согласитесь, что выглядят все эти элементы совершенно по-разному, однако, отвечает за них один и тот же тег. И для того, чтобы применять стиль лишь при определённом значении какого-либо атрибута, и используют селекторы параметров. Синтаксис следующий

имятега[имяатрибута="значениеатрибута"] <
свойство1: значение1;
свойство2: значение2;
>

Применяется данный стиль в следующем случае: если в теге "имятега" значение "имяатрубита" равно "значениеатрибута" то будет применён стиль, в противном случае стиль не применяется.

Чтобы стало ещё понятнее, привожу пример:

input[type="submit"] <
border: 2px double black;
>

<input type = "submit" value = "Кнопка с двойной чёрной рамкой">
<input type = "button" value = "Другая кнопка">

Надеюсь, что и здесь всё прозрачно. Ещё один очень важный момент, виды селекторов можно совмещать, например, данный CSS вполне нормальный и рабочий:

#header li a <
font-size: 150%;
>

И HTML-код, который вызовет этот стиль:

Думаю, что и здесь вопросов не возникнет.

Напоследок хочется сказать, что селекторы — это основа CSS, которую обязан знать любой, кто создаёт сайты с нуля. А как применять эти селекторы — это уже зависит только от Ваших дизайнерских навыков.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 24 ):

Здравствуйте. прочитал статью о селекторах CSS и озадачился вопросом: может ли имя класса/ID состоять из 2х и боле слов? и если может, то можно ли брать его в какие-нибудь кавычки в случае описания стиля, содержжащего контекстные или соседние селекторы? Заранее спасибо.

Безусловно, можно. Например такое имя MyName. Но только важно, чтобы между словами не было пробелов и чтобы в имени не было различных спецсимволов. Никаких кавычек не нужно.

А на этом сайте точно все материалы о языках HTML, CSS, Java, PHP?

Нет, конечно. Чтобы были все материалы по всем этим языкам, потребуется не меньше 10 лет ежедневного написания. Никто полностью эти языки не знает. Да это и не нужно. По Java здесь вообще ничего нет. Здесь только по JavaScript.

Извините за тупой вопрос, но как сделать отступ текста от блока? Я просто совсем эту тему забыл.

Отступ делается с помощью padding.

Но у меня тогда растягивается сам блок но отступы внутри появляются. А как сделать чтобы блок не растягивался?

Делайте тогда фиксированные размеры блока.

Ну у меня и так 2 сайдбара по 200 пикс. А если я делаю паддинг то у меня они один на один залазят

Контекстный селектор Тег1 Тег2 < . >применяет стиль к Тег2. А как применить стиль к Тег1, если в нем есть Тег2 ?

Никак не получится. Поэтому выход только один — обратиться как-то иначе, например, поставить селектор ID или CLASS.

Если не уделить время и не разобраться с работой селекторов,то изучить CSS довольно сложно. Хочу поделиться своим опытом. Создайте простой одностраничный сайт на блоках и на этом,своём сайте, изучайте CSS. Наскоком изучить CSS нельзя,уделите этому изучению какое то время и во время изучения не отвлекайтесь на другие вопросы.

Михаил, из-за чего могут не работать селекторы параметров в IE9. В Мозиле всё отлично работает.

В IE9 всё работает, поэтому проблема конкретно с Вашим браузером, либо какие-то свойства специфичные применяете, попробуйте с тривиальным чем-нибудь, например, font-size или color.

Привет михаил! Получилось задействовать селекторы параметров путём прямого указания на файл стиля во вкладке:свойства обозревателя/общие/оформление. Но никак не получается автоматически выполнить эти свойства. Два дня уже бьюсь над этим 🙂 Может есть соображения, где этот флажок найти?

Подскажите пожалуйста, по незнанию написала код через селекторы ID, сказали все заменить на Class. Когда меняю разваливается вся страница?Что делать ? писать весь код заново через классы?

Внимательно надо всё исправлять, больше тут писать нечего.

Есть отличия в кодах цветов в html и и а css у меня почему-то свет #E6E6FA в html и в css по разному выглядит. А большинство вабще не отображаются. Может там только словами задавать можно ? style="background-color:green"

Все цвета лучше задавать через CSS, и лучше кодом, а не словами.

Извините за тупой вопрос, но куда нужно поместить CSS file для его функционирования?(у меня в той же папке что и HTML file — не работает. ) Помогите новичку. Спасите. P.S Автору сайта огромное СПАСИБО.

Вам нужно поместить файл в любое место,в идеале в ту же папку,где и html документ,и потом подключить его в самом html документе

Не работает селектор параметров! Вот код HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>MySite</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style2.css"> </head> <body> <form name="myform" action="#" method="post"> <div> <input type="text" name="name" /> </div> </form> </body> </html> А вот код CSS из файла style2.css: input [type="text"] < color: #f00; >больше никакого лишнего кода нигде нет и ничего не работает. Битый час смотрю уже примеры на других разных сайтах, вроде всё должно работать, а не работает. Почему?

Здравствуйте, не работает только селектор параметров при запуске в браузере IE8, всё остальное работает. Если запускать из Notepad++ Запуск\ Launch IE, то работают все селекторы и параметров тоже. Подскажите, пожалуйста, в чём может быть причина.

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Селекторы — Основы вёрстки контента

В прошлых уроках и упражнениях мы использовали достаточно простые селекторы. Они позволяли выбрать элементы, к которым будут применены CSS правила. Вы уже умеете выбирать элемент по его тегу, классу, идентификатору и найти вложенный элемент.

CSS даёт намного большие возможности по выбору элементов. В этом уроке мы изучим самые популярные селекторы второго и третьего уровня спецификации W3C. В конце урока будут оставлены ссылки на спецификации, в которых вы сможете узнать и о других селекторах.

Выбор соседнего элемента

Ранее, использование селекторов указывало, какой конкретно элемент мы хотим выбрать и где он находится относительно своих родительских блоков. В большинстве случаев этого достаточно для точного указания элемента, но бывают случаи, когда нужно выбрать соседний элемент, а не вложенный. Например,

Элемент .timer полностью зависит от блока .time . Предположим, что стиль таймера меняется в зависимости от наличия элемента с классом .time . Есть несколько путей решения такой задачи:

1. Положить оба элемента в единого родителя и дать им уникальные классы для разных ситуаций.
2. Воспользоваться селектором соседнего элемента.

Чаще всего, именно первый вариант будет предпочтительным. При этом вы не раз столкнётесь с ситуациями, когда это невозможно. Такое может происходить при динамическом добавлении элементов на страницу. И тут на помощь приходят селекторы.

В CSS существует два селектора для выбора элемента, который лежит рядом с другим элементом:

• A + B — выбор элемента B, который находится непосредственно после элемента A. Такой селектор называется смежным или соседним
• A

Для примера выше отлично подойдёт смежный селектор. Элементы .time и .timer идут друг за другом и являются дочерними элементами одного и того же родителя. Стилизуем элемент .timer в зависимости от существования элемента .time :

Родственный селектор позволяет немного усложнить ситуацию. Ведь теперь будет возможность не просто выбрать соседний элемент, а элемент, лежащий на том же уровне. Изменим пример, который позволит наглядно продемонстрировать возможность родственного селектора.

Схематически CSS будет выглядеть следующим образом:

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

Атрибуты — неизменная часть работы верстальщика и фронтенд-разработчика. Они не всегда несут в себе семантический смысл, как например атрибут alt, title, class, id и так далее. HTML позволяет добавлять любые пользовательские атрибуты и работать с ними. Для стилизации таких элементов в CSS существуют специальные селекторы.

Самый простой селектор по атрибуту просто выбирает элемент по его атрибуту. Атрибут записывается внутри квадратных скобок.

Можно выбирать не только по названию атрибута, но и по его значению. В этом случае рядом с именем атрибута указывается его значение в следующем синтаксисе:

С опытом вы заметите, что многие JavaScript библиотеки работают именно с пользовательскими атрибутами. Это позволяет добиться изолированности компонентов и их удобного переиспользования.

Бывают ситуации, когда в HTML есть группа элементов с одинаковыми именами атрибутов, но с разными значениями. Причём некоторые из них могут быть похожи друг на друга, составляя части одного компонента. Например,

Все три секции, по своей логике, будут иметь похожее оформление. Можно добавить всем одинаковый класс, но существует одна проблема: если элементы добавляются динамически, с помощью JS, то есть вероятность существования такого же класса внутри проекта. Это приведёт к коллизии, когда один селектор перебьёт свойства другого. Поэтому и используются атрибуты.

Все три секции имеют одинаковую приставку catalog. Это поможет отделить их от остальных названий секций с помощью конструкции [nm-section^="catalog"] . Такой селектор выберет все элементы с атрибутом nm-section значение которого начинается с catalog.

Есть ещё несколько похожих конструкций, которые ищут «вхождение» подстроки в строку:

• [nm-section$="catalog"] — вхождение строки в конце значения атрибута.
• [nm-section*="catalog"] — вхождение строки в любом месте значения атрибута.

Самостоятельная работа

Возьмите любой из предыдущих уроков и, используя селекторы по атрибуту и селекторы по соседнему элементу, повторите вёрстку.

Руководство: CSS селекторы в GTM

В данной статье мы рассмотрим CSS селекторы с примерами их использования в GTM.

Несколько лет назад Google Tag Manager добавил новый предикат триггера с названием &#8216;соответствует селектору CSS&#8217;. Со временем он стал одной из самых полезных функций в GTM.

Что такое селекторы CSS?

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

Иногда селекторы просты и надежны. Например, селектор типа div#author выбирает элемент <div > . Так как у него есть атрибут id , разумно предположить, что это единственный такой элемент на странице, поэтому даже такой короткий селектор очень надежный.

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

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

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

CSS селекторы возникли, сюрприз &#128578; , в каскадных таблицах стилей &#8211; CSS. Таблицы стилей &#8211; это набор правил и деклараций, которые регулируют то, как элементы HTML отображаются (а иногда и взаимодействуют с ними) на веб-странице. Вот как может выглядеть типичная декларация стилей:

1. Выберите все ссылки ( а ), над которыми находится курсор мыши ( :hover )
2. И выберите все ссылки ( а ), на которые происходит клик ( :activ )
3. ЗАТЕМ удалите из них все текстовые декорации (например, нижнее подчеркивание)
4. И сделайте шрифт жирным

CSS &#8211; это отдельная дисциплина в веб-дизайне и разработке. Используя CSS можно сделать много вещей, начиная с замены функциональности JavaScript и заканчивая выполнением сложных переходов с использованием аппаратного ускорения. Базовую документацию на английском можно посмотреть здесь.

Но в этом руководстве мы сконцентрировались на том, как использовать CSS-селекторы с JavaScript в Google Tag Manager, чтобы извлечь максимальную пользу из триггеров, тегов и переменных, где выбор, запрос или извлечение правильного элемента имеет первостепенное значение.

CSS селекторы в JavaScript

В JavaScript селекторы CSS часто встречаются в двух сценариях:

1. Нужно извлечь конкретный элемент(ы) страницы.
2. Нужно проверить, соответствует ли данный элемент CSS-селектору.

Оба этих сценария очень актуальны в Google Tag Manager. Прежде чем перейти к тому, как они работают в GTM, давайте рассмотрим работу JavaScript с CSS-селекторами.

Использование document.querySelector и document.querySelectorAll

Два метода JavaScript, которые чаще всего используются с CSS-селекторами &#8211; document.querySelector(selector) и document.querySelectorAll(selector) .

Первый возвращает первый элемент на странице, соответствующий заданному селектору.

Второй возвращает список всех элементов на странице, соответствующие заданному селектору.

Как видите, селектор передается методу в качестве строкового аргумента.

Элементы HTML по сути являются объектами, и просто их извлечение часто не имеет смысла. Вместо этого, обычно нужно что-то сделать с этими объектами, например, извлечь какое-нибудь их свойство.

В приведенном выше примере мы используем document.querySelector , чтобы получить первую внешнюю ссылку (т.е. ссылку, в href которой нет mydomain.com ), а затем вставляем ее в dataLayer .

Нужно помнить, что document.querySelectorAll возвращает не массив, а NodeList . Это значит, что к нему нельзя применять обычные методы массивов. Придется прибегнуть к обходным путям, если вы, например, захотите map() все элементы в списке, чтобы в результате получить массив.

Как видно, для запуска метода map() на списке, возвращаемом document.querySelectorAll , необходимо вызвать метод из прототипа массива.

Использование element.matches

Если нужно проверить, совпадает ли какой-либо элемент с определенным CSS-селектором, можно использовать метод matches() , например так:

Вы вызываете метод matches() на самом элементе (элемент должен быть HTML-элементом), и, подобно querySelector / querySelectorAll , передаете селектор в качестве строкового аргумента. Метод возвращает true при совпадении и false в противном случае.

Метод matches() чаще всего используется в триггерах в Google Tag Manager. Так что давайте начнем!

CSS селекторы в Google Tag Manager

В Google Tag Manager с селекторами CSS можно столкнуться в нескольких местах.

Например в поле &#8216;Метод выбора&#8217; в переменной &#8216;Элемент DOM&#8217;:

Использование здесь CSS-селектора позволяет указать на конкретные элементы, не имеющие атрибута ID.

Эту же опцию можно найти и в триггере &#8216;Доступность элемента&#8217;:

В то время как переменная DOM Element возвращает только первый подходящий элемент (аналогично document.querySelector ), триггер &#8216;Доступность элемента&#8217; может быть настроен на все подходящие элементы, что делает CSS-селекторы сверхмощными в данном конкретном типе триггеров.

Третий, и на сегодняшний день самый полезный сценарий для селекторов CSS в Google Tag Manager &#8211; это предикат &#8216;соответсвует селектору CSS&#8217; при его использовании совместно со встроенной переменной <>.

Переменная Click Element

Переменная Click Element &#8211; это встроенная переменная, которую нужно активировать перед использованием. Самый простой способ ее включения &#8211; перейти к переменным через основную навигацию GTM и нажать кнопку &#8216;Настроить&#8217; в правом верхнем углу.

В открывшемся окне установите флажок рядом с Click Element, и все готово. Теперь вы сможете выбрать переменную Click Element во всех выпадающих списках переменных GTM.

Click Element возвращает HTML-элемент, который был целью действия автособытия триггера. Другими словами, он возвращает:

• нажатый элемент при использовании триггеров Клик / Все элементы и Клик / Только ссылки.
• отправленный элемент формы при использовании триггера &#8216;Отправки формы&#8217;.
• элемент, который стал видимым при использовании триггера &#8216;Доступность элемента&#8217;.

Поскольку он возвращает HTML-элемент, он может быть использован в HTML-тегах и пользовательских JavaScript-переменных вместе с типичными методами HTML-элементов, например getAttribute , appendChild и matches .

В GTM он чаще всего используется с предикатом &#8216;соответсвует селектору CSS&#8217; в триггерах Клика и Формы. С триггером &#8216;Доступность элемента&#8217; это не очень полезно, потому что в триггере вы уже указываете набор элементов соответствия с настройками CSS-селектора.

Предикат &#8216;соответствует селектору CSS&#8217;

Предикат &#8216;соотвествует селектору CSS&#8217; можно использовать вместе с переменной Click Element, для того чтобы проверить, совпадает ли элемент с определенным селектором.

Это может быть полезно для триггера &#8216;Все элементы&#8217;, так как он срабатывает при каждом нажатии в любом месте страницы, и можно использовать CSS-селекторы для предотвращения слишком частого исполнения тега, к которому прикреплен триггер.

Чтобы все заработало, нужно сначала проверить &#8216;Условия активации триггера&#8217;…. &#8216;Некоторые клики&#8217;,&#8217;Некоторые клики по ссылкам&#8217;,&#8217;Некоторые формы&#8217;, затем выбрать переменную Click Element из списка переменных, предикат &#8216;соответсвует селектору CSS&#8217; из списка предикатов, а затем вписать селектор в поле справа, например, так:

Триггер &#8216;Все элементы&#8217; захватывает тот элемент, на который пользователь действительно нажал. Таким образом, это может оказаться что-то вложенное в элемент вместо самого элемента. С триггером &#8216;Все элементы&#8217; можно также использовать символ ( * ).

Ссылка на селектор CSS в Google Tag Manager

Селекторы можно комбинировать для идентификации различных аспектов элемента. При совмещении селекторов помещайте их один за другим, не оставляя между ними пробелов. Например, чтобы указать на все <a> элементы, имеющие класс author и someone как id, и которые также являются внешними ссылками, можно написать так:

Порядок неважен, но псевдо-классы (например, :checked , :not ) принято ставить в конце для удобочитаемости.

.class

Соответсвует элементам, у которых данный класс является одним из имён класса в атрибуте class .

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает при нажатии на ссылку. Клик по <span> тоже работает, поскольку триггер &#8216;Только ссылки&#8217; автоматически извлекает ближайший <a> элемент того, что было кликнуто.

Соответсвует элементам, у которых заданный ID является значением их атрибута id .

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает при нажатии на элемент <span >. </span> .

element

Соответсвует элементам, которые являются element (например, a для ссылок, img для изображений).

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если кликнутый элемент это <img > . Как видите, селектор объединяет и element , и id , то есть совпадающий элемент должен быть и изображением и иметь ID someone .

element,element

Соответствует элементам, которые можно выбрать ЛЮБЫМ из селекторов, разделенных запятой (можно добавить несколько селекторов, каждый из которых разделен запятой).

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик происходится ЛИБО на <img . /> ЛИБО на <p >. </p>.

element element

Соответствует самому правому элементу, когда он находится внутри самого левого элемента DOM-дерева. Связь не обязательно должна быть родительской &#8211; достаточно, чтобы элемент слева в какой-то момент оборачивал элемент справа.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на <h1>Hello world!</h1> , потому что один из его элементов обертки совпадает с первым селектором ( section#main ).

* (wildcard)

Соотвествует любому элементу. Очень полезно при использовании с триггером Клик / Все элементы.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает при клике на элемент <div > или на любой из его вложенных элементов ( <ul> , <li> and <a> ).

Селектор &#8211; div#navi, div#navi * . Основываясь описанном выше, на самом деле это два селектора, div#navi и div#navi * , и триггер будет срабатывать, если нажать на любой из них.

Первый селектор соответствует кликам непосредственно на элементе <div > . Второй селектор соответствует клику по любому элементу, обёрнутому элементом <div > . Пробелы здесь важны. Если бы второй селектор был div#navi > * , то он бы совпал только с кликами на <ul> , так как это единственный прямой дочерний элемент <div > .

element>element

Соответствует самому правому элементу, когда его прямым родителем является элемент слева.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на <h2>Goodbye world!</h2> потому что его прямым родителем является <div> . Он не будет срабатывать на <h2>Hello world!</h2> потому что прямым родителем этого элемента является <a> .

element+element

Соответствует самому правому элементу, если он идет непосредственно за самым левым элементом. Они должны иметь одного родителя.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает при клике на <span> , потому что он находится сразу после <img /> .

element1

Соответсвует самому правому элементу, если ему предшествует самый левый элемент. Они должны иметь одного родителя. Другими словами, этот селектор немного менее строг, чем предыдущий селектор, в том смысле, что предыдущий элемент не должен находиться непосредственно рядом с целевым элементом.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на <a> , потому что ему предшествует <img /> .

[attribute]

Соответствует, если элемент имеет заданный атрибут.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на <span> , потому что его прямым родителем является <div> с атрибутом data-name .

[attribute=value]

Соответсвует, если элемент имеет заданный атрибут с точным значением.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на второй <span> , потому что только он имеет прямого родителя, чей атрибут data-name имеет значение second_gtm_example .

[attribute^=value]

Соответствует, если элемент имеет заданный атрибут, значение которого начинается с заданной строки.

Пример структуры HTML

Пример триггера

Результат

Триггер срабатывает, если клик попадает на любой из двух элементов <span> чей ID начинается с product . Он не будет запускаться, если клик произойдет на третий span, потому что ID этого элемента начинается с attachment .

[attribute$=value]

Соответствует, если элемент имеет заданный атрибут, значение которого заканчивается на заданную строку.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик попадает либо на первый <span> либо на последний <span> , так как ID атрибуты обоих элементов заканчиваются на _12345 . Он не будет срабатывать, если клик произойдет на <span > , так как его ID не заканчивается на _12345 .

[attribute*=value]

Соответствует, если элемент имеет заданный атрибут, значение которого содержит заданную строку.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик попадает на любой из первых двух элементов <span> , так как у них есть идентификаторы, содержащие строку surname . Он не будет выполняться для третьего <span> , потому что ID этого элемента не содержит строку surname .

:checked

Соответствует, если данный элемент выбран/отмечен (радиокнопки, флажки и элементы <option> в меню выбора).

Пример структуры HTML

Пример триггера

Селектор

Результат

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

:first-child

Соответствует, если данный элемент является первым дочерним элементом родителя.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на <li>Home</li> так как он является первым дочерним элементом его прямого родителя.

:first-of-type

Соответсвует, если данный элемент является первым элементом своего типа (например, p, img, span ) его родителя.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик попадает на <p>Web Analytics Developer</p> так как это первый <p> под его родителем.

:last-child

Соответсвует, если данный элемент является последним дочерним элементом своего родителя (обратный :first-child ).

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на <li>Death metal</li> так как он является последним дочерним элементом его родителя.

:last-of-type

Соответствует, если данный элемент является последним элементом своего типа.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если щелчок приземляется на <p>Enthusiast</p> так как он является последним <p> под родителем.

:not(selector)

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

Пример структуры HTML

Пример триггера

Селектор

a:not([href* https://tagmanager.google.com/">Favorite hobby</a> ). Это происходит потому, что селектор CSS нацелен на все элементы ссылок ( <a> ) которые не соответствуют селектору CSS [href*="test.com"] . Другими словами, ссылка не должна иметь атрибут href , содержащий строку test.com .

:nth-child(n)

Соответствует, если данный элемент является n-м дочерним элементом, где n &#8211; число, переданное в скобках.

Пример структуры HTML

Пример триггера

Селектор

Результат

Триггер срабатывает, если клик приходится на <li>Ukulele</li> так как это второй дочерний элемент( nth-child(2) ) его родителя.

Заключение

Мы считаем, что CSS-селекторы наряду с JavaScript и регулярными выражениями &#8211; это первостепенная вещь, которую нужно изучить, чтобы освоить Google Tag Manager.

Большая часть веб-аналитики в браузере, особенно при отслеживании взаимодействий, основана на возможности отслеживать взаимодействия с определенными элементами. Обычно рекомендуется использовать атрибуты id и class этих элементов, но очень часто такие атрибуты отсутствуют.

Именно в таких ситуациях помогают селекторы CSS. Они позволяют точно определить каждый отдельный элемент на странице, ведь каждый элемент всегда имеет уникальную позицию, на которую можно указать с помощью определенного селектора.

Просто помните наш совет из начала статьи &#8211; всегда стремитесь к тому, чтобы селектор был как можно проще, насколько это возможно.