Как определить селектор css
Перейти к содержимому

Как определить селектор css

  • автор:

CSS селекторы, свойства, значения

Каскадная таблица стилей состоит из CSS правил. Каждое CSS правило состоит из селектора и блока декларации.

Синтаксис CSS селектора

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

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

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

Свойства – это ключевые слова, такие как color , font-weight или background-color , которым присвоены определенные значения:

 body

В данном примере создается CSS селектор body , который соотносится с HTML тегом . В этом селекторе определяется два свойства – font-size и color , которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст внутри элемента (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8em и темно-синим цветом.

Категории CSS селекторов

CSS селекторы можно разделить на пять категорий:

  • Простые селекторы (элементы отбираются по имени, идентификатору или классу)
  • Комбинированные селекторы (элементы отбираются по специфическим отношениям между ними)
  • Селекторы псевдоклассов (элементы отбираются по определенному состоянию)
  • Селекторы псевдоэлементов (отбирается и стилизуется часть элемента)
  • Селекторы атрибутов (элементы отбираются по атрибутам или значениям атрибутов)

CSS селектор элемента

Селектор элемента или HTML селектор — это простой селектор, который отбирает HTML элементы по их имени.

В следующем примере отбираются все существующие на странице элементы

. Их текст будет красного цвета и выровнен по центру:

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

CSS селектор идентификатора

Селектор идентификатора для отбора заданного элемента использует атрибут id HTML элемента.

Идентификатор элемента уникален в пределах веб-страницы, таким образом селектор идентификатора используется для выбора одного уникального элемента!

Чтобы определить селектор идентификатора, нужно написать символ решетки (#) и имя идентификатора элемента.

В следующем примере определяются стили для HTML элемента с идентификатором :

 #para1

Внимание! Имя идентификатора не может начинаться с цифры!

CSS селектор класса

Селектор класса для отбора заданного элемента использует атрибут class HTML элемента.

Чтобы определить селектор класса, нужно написать символ точки (.) и имя класса элемента.

В следующем примере все HTML элементы с классом будут отображать текст красного цвета, который выровнен по центру:

 .center

Так как один и тот же класс может присваиваться нескольким элементам, вы можете указать на какой именно HTML элемент должен влиять селектор класса.

В следующем примере только элементы

с классом будут отображать текст красного цвета, который выровнен по центру:

 p.center

Также, HTML элементы могут иметь больше одного класса.

В следующем примере элемент

будет принимать стили, соответствующие селекторам класса и :

  p.center < text-align: center; color: red; >p.large 

Этот параграф определен по двум классам.

Внимание! Имя класса не может начинаться с цифры!

Универсальный селектор

Универсальный селектор (*) отбирает абсолютно все HTML элементы на странице.

Следующее CSS правило окажет воздействие на каждый HTML элемент на странице:

Группирование селекторов

Группирование селекторов позволяет объединить одно и то же определение стиля для нескольких HTML элементов в одну декларацию.

Посмотрите на следующий код CSS (для элементов h1, h2 и p заданы одинаковые стили):

 h1 < text-align: center; color: red; >h2 < text-align: center; color: red; >p

Чтобы уменьшить количество кода, мы можем сгруппировать эти селекторы в одну декларацию.

Чтобы сгруппировать селекторы, нужно в головной части перечислить их через запятую.

В следующем примере мы группируем селекторы из предыдущего примера:

CSS Selector Tester и его аналоги

Контекстная, таргетированная реклама и веб-аналитика

Во многих статьях своего блога, посвященных работе Google Tag Manager и поиску CSS-селекторов у конкретных элементов, я неоднократно упоминаю такой инструмент, как CSS Selector Tester.

С его помощью можно проверить правильность выбора определенного элемента для настройки триггера и его отладки в GTM. Активировав расширение на отслеживаемой странице и вставив конструкцию селектора в соответствующее поле CSS Selector Tester, вы увидите, как нужный элемент подсветится на странице:

Подсветка отслеживаемого элемента

Если бы вы ввели неверный селектор, то отобразилось бы сообщение undefined (не определено), и элемент не был бы найден и подсвечен на странице.

К сожалению, с недавнего времени расширение CSS Selector Tester было удалено из магазина Google за нарушение правил. Многие подписчики стали спрашивать меня об аналогах этого расширения для Google Chrome, поскольку не успели установить его к себе в браузер. В этом материале я поделюсь с вами несколькими расширениями, которые используют в своей повседневной работе.

CSS Selector Tester

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

Вы можете скачать его по моей ссылке и установить к себе в браузер Google Chrome в обход официальному интернет-магазину. Это можно сделать с помощью режима разработчика приложения для Google Chrome.

Чтобы установить скачанный CSS Selector Tester в свой браузер, распакуйте его в отдельную папку на вашем локальном компьютере. Просто кликните правой кнопкой мыши на загруженный файл и выберите Извлечь в текущую папку:

Извлечение расширения CSS Selector Tester в папку

Рядом с архивом вы увидите новую папку с таким же названием:

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

Дополнительные инструменты — Расширения

В правом верхнем углу напротив режима разработки переведите ползунок в положение Вкл.

Включение режима разработчика

У вас появится дополнительное меню с настройками. Нажмите на кнопку Загрузить распакованное расширение:

Загрузка распакованного расширения

На своем компьютере найдите папку с расширением, которую вы извлекли. Важно: при указании пути к файлу вы должны провалиться внутрь папки 1.3.3_0 (иначе не получится, Google будет ругаться на отсутствие манифеста) и после этого нажать Выбор папки:

Выбор папки с расширением на компьютере

Все! В результате в вашем браузере появится то самое расширение CSS Selector Tester, которое удалили из публичного доступа в интернет-магазине Google Chrome.

Установленный CSS Selector Tester

Вы можете отключить режим разработчика и наслаждаться работой как и прежде.

Аналоги CSS Selector Tester
CSS and XPath checker

Еще одно простое и полезное расширение из этой категории, которое сейчас доступно для установки в интернет-магазине Google Chrome. Оно помогает проверить селектор CSS и XPath. Инструмент выделяет все элементы на странице с указанным селектором. Просто выберите CSS или XPath и вставьте нужную конструкцию в соответствующее поле:

Расширение CSS and XPath checker

Как определить селектор css

Ответ. Селектор служит для связи определения с элементами HTML-кода.

Ответ. В качестве селектора элемента записывается имя элемента. Например, P .

Ответ. Селектор элемента связывает определение со всеми элементами с заданным названием. Например, селектор P свяжет определение со всеми абзацами (c элементами P ).

Ответ. Селектор класса имеет вид: .имя класса . Например, .mark .

Ответ. Селектор класса связывает определение со всеми элементами, в открывающем теге которых записан атрибут class со значением, совпадающим с именем класса (не считая начальной точки). Например, селектор .mark связывает определение со всеми элементами с атрибутом class=»mark» .

Ответ. Селектор класса с привязкой к элементу имеет вид: ИМЯ ЭЛЕМЕНТА.имя класса . Например, P.mark .

Ответ. Селектор класса с привязкой к элементу связывает определение со всеми элементами с указанным названием, в открывающем теге которых записан атрибут class со значением, совпадающим с именем класса (не считая разделяющей точки). Например, селектор P.mark связывает определение со всеми элементами P с атрибутом class=»mark» . Такое определение не будет работать для элементов с классом mark , если они не являются элементами P .

Ответ. Селектор идентификатора имеет вид: #имя класса . Например, #mark .

Ответ. Селектор идентификатора связывает определение со всеми элементами, в открывающем теге которых записан атрибут id со значением, совпадающим с именем идентификатора (не считая начальной решётки). Например, селектор #mark связывает определение со всеми элементами с атрибутом id=»mark» .

Ответ. В одном HTML-файле не может быть двух элементов с одними идентификатором. Внутри файла идентификатор уникален. Элементов с одним и тем же классом в одном файле может быть сколько угодно.

Ответ. Универсальный селектор представляется символом звёздочка (*).

Ответ. Универсальный селектор соответствует любому элементу.

Ответ. Для связи одного определения с несколькими селекторами последние перечисляются в заголовке определения через запятые, образуя, тем самым, составной селектор. Например, EM,STRONG,.mark . Такая операция называется .

Ответ. Связь такого определение с элементами определяется как совокупность связей всех селекторов, входящих в состав составного селектора. Например, селектор EM,STRONG,.mark связывает определение со всеми элементами EM , STRONG , а также с элементами, в открывающем теге которых записан атрибут class=»mark» .

Ответ. Контекстными называются определения, работающие только при определенной комбинации вложенности элементов.

Ответ. Для задания контекстного определения селекторы в его заголовке перечисляются через пробелы (пробел — ) в порядке предполагаемой вложенности. Например, P EM .

Ответ. Контекстное определение связано с элементами, которые удовлетворяют указанному в заголовке определения порядку вложенности. Например, селектор P EM связывает определение с теми элементами EM , которые вложены в элемент P (являются его потомками, не обязательно прямыми).

Ответ. Элемент сохраняет стили своего родителя, и сам передаёт приобретённый стиль по наследству своим потомкам.

Ответ. Не все свойства наследуются, например, не наследуется свойство border (описывает рамку элемента). В справочниках по свойствам CSS факт наследования всегда отмечается.

Ответ. Под каскадированием стилей понимается принцип обработки множественных определений, заданных для одного элемента.

Ответ. Частное определение главнее общего.

Ответ. Стилевое определение потомка отменяет аналогичное определение родителя и передаётся по наследству.

  1. Если для родительского элемента (например, BODY ) задано стилевое определение, и оно не конфликтует со стилевыми определениями, заданными для потомка (например, для P ), то стилевое определение родителя наследуется потомком.
  2. Стилевое определение потомка (например, P ) главнее аналогичных определений родителя (например, BODY ).
  3. Стилевое определение в теге главнее стилевого определения в головной части HTML-кода, а последнее главнее определений, заданных в отдельном стилевом файле.
  4. Если задано несколько конфликтующих стилевых определений равного каскадного веса, то действует последнее из них. Например, текст в абзаце < P style="color:red;color:blue">будет синего цвета.

Девять CSS-селекторов на заметку начинающему веб аналитику

Свободный перевод. Ссылка на оригинальную статью Симо Ахава: #GTMTips: 10 Useful CSS Selectors.

Использование CSS-селекторов в Google Tag Manager — без сомнения, одна из его самых полезных опций. Это дает непревзойденную гибкость, особенно в сочетании с триггерами кликов и форм.

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

Вы можете использовать CSS-селекторы в любом JavaScript (или CSS), который развертываете у себя на сайте или в GTM, но, полагаю, наиболее типичным вариантом использования будет условие триггера «соответствует селектору CSS». Оно позволяет оценить элемент, по которому кликнули. Ниже более подробно об этом.

Итак, вы хотите отправлять событие по условию, что клик произошел по определенному HTML-элементу. Чтобы реализовать это, вам потребуется триггер клика или формы. В рамках данного триггера нужно выбрать опцию «Некоторые клики» и добавить свое условие.

Например, приведенный ниже триггер сопоставит элемент, который был нажат, с CSS-селектором и сработает только в том случае, если выбранный элемент является прямым потомком элемента с идентификатором myDiv.

Помимо того, что CSS-селекторы используются для создания триггеров, сами по себе они тоже могут вам очень пригодиться. Разумеется, они нужны в таблицах стилей, но их также можно использовать с такими DOM-методами как querySelector() и querySelectorAll(), а также с matches() (для поддержки кросс-браузерности могут потребоваться некоторые дополнительные настройки).

Ниже перечислены девять CSS-селекторов, с помощью которых вы сможете настроить отслеживание большинства распространенных видов событий для сайта.

1. Общие селекторы

Следующие селекторы используются для точного определения элементов на основе их атрибутов или их позиции в DOM. Их можно комбинировать, размещая один за другим. Например, div[title=”someTitle”][data-gtm-event=”someEvent”] будет соответствовать любому элементу div, который имеет атрибуты title и data-gtm-event.

  • .someClass — соответствует элементу с классом “someClass”, например
  • #someId — соответствует элементу с id “someId”, например
  • element — соответствует любому HTML-элементу с названием “element”. Например, “div” соответствует любому div элементу на странице, а “div#myId” будет соответствовать
  • element element — соответствует любому HTML-элементу, который является потомком предыдущего.Чтобы соответствие сработало, между элементами не обязательно должно соблюдаться отношение родитель-потомок — первый элемент просто должен предшествовать второму в том же дереве. Например, “span.myClass div#myId” соответствует любому div#myId, который является потомком span.myClass. Вы можете добавить столько ссылок в цепочку, сколько захотите. Наприме, “div#main ol li”, будет соответствовать любому li, который является потомком ol, который является потомком div#main.
  • element > element — соответствует любому HTML-элементу, который является прямым потомком предыдущего элемента. Например, “div#myId > a#contactUs” соответствует selector, selector — два селектора, разделенные запятой работают в триггерах по логике или-или. Таким образом, вы можете указать несколько селекторов, и если один из них совпадает, триггер сработает.

Эти универсальные селекторы являются основой практически всего, что вы делаете с CSS-селекторами.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *