CSS-селекторы: как указать элемент страницы

Условия «Якорь» и «Клики по элементам», а также CSS-стили окна и блоков требуют селектора: способа указать нужный элемент страницы.

Три способа записи

Способ Запись Пример
По идентификатору (id) # и имя #myid
По классу . и имя .myclass
По атрибуту (data, name и др.) в квадратных скобках [data-some="value"]

Можно указать и имя тега, например h1 или p: стиль применится ко всем таким тегам.

  • Имя класса начинается с буквы; допустимы латинские буквы, цифры, дефис и подчёркивание. Регистр важен. Один класс может быть у нескольких элементов.
  • Идентификатор уникален: на странице он встречается один раз. Он приоритетнее класса.

Как найти селектор на своём сайте

  1. Откройте сайт и наведите курсор на нужный элемент.
  2. Нажмите правую кнопку мыши и выберите «Просмотреть код».
  3. На вкладке «Elements» подсветится HTML этого элемента. Найдите у тега атрибуты id, class, data-… или name.
  4. Если таких атрибутов нет, элемент не получится выбрать селектором: обратитесь к разработчику сайта.

Несколько селекторов в условии «Клики по элементам» перечисляйте через запятую.

Просмотр изображения
Оригинал