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

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

Виды селекторов

Рассмотрим самые простые и удобные виды:

• Классы (.class) — применяются для элементов с атрибутом class и необходимым значением.
• Идентификаторы (#id) — применяются для элементов с атрибутом id и необходимым значением.
• Теги — в качестве селектора выступает имя тега.

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

Селектор class

Рассмотрим пример для настройки отображения виджета при наведении на кнопку «Начать работу» на главной странице GetSale.

Открываем код страницы и смотрим код кнопки «Начать работу».

Находим атрибут class и копируем его значение — «target-btn button getsale-start», добавляя точки в начало и вместо пробелов:

Это значение и вписываем в условие показа виджета:

Селектор id

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

Находим кнопку «В корзину» и смотрим ее код:

Видим атрибут id и копируем его значение, добавляя символ # вначале:

Именно это значение и добавляем в условие показа виджета.

Селектор тегов

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

По аналогии можно использовать любой тег, используемый на вашем сайте.