Войти через Яндекс
Достаточно часто мне задают вопрос: как узнать id или класс того или иного элемента на странице. Это требуется, когда нужно поменять цвет, размер и прочие свойства кнопки, текста, таблицы. В общем, всего, что расположено на HTML странице. А бывает и так, что ничего менять не нужно, а нужно просто узнать: как обратить к элементу и прописать эти данные в каком либо расширении.
Например, в моем плагине «i agree», есть поле для настройки под названием «Класс или ID элемента», куда необходимо ввести либо любой из указанных атрибутов, либо полностью селектор, позволяющий в CSS обратиться к кнопке.
Как узнать id или класс элемента на HTML странице
Приступим непосредственно к решению нашей задачи.
Далеко не каждый знает, но в каждый современный браузер встроены так называемые «Инструменты разработчика (DevTools)».
Они позволяют заниматься отладкой кода, проверять запросы, изучать работу с куки и многое другое.
Сегодня мы и воспользуемся этими самыми инструментами.
Весь дальнейший процесс я буду описывать работая в Яндекс Браузере. В остальных браузерах принцип работы будет тот же.
Предположим, нам нужно просмотреть атрибуты кнопки «Подробнее», расположенной на главной странице моего сайта.
Для этого наведём мышку на кнопку, кликнем правой кнопкой мышки, чем вызовем контекстное меню и нажмём на пункт «Исследовать элемент».
В нижней или боковой части экрана откроются те самые «Инструменты разработчика». Активной будет вкладка «Элементы».
Более того, в коде страницы подсвеченным окажется выделенный нами элемент.
Мы видим атрибут class, значение которого расположено в кавычках.
При желании можно кликнуть мышкой по тексту в кавычках и скопировать его.
В моём случае получится следующее:
btn btn-success btnlist
Однако, если я вставлю такое в свой файл CSS, то получу ошибку.
Каждый класс определяется точкой в начале. Если мы хотим правиле CSS указать несколько классов, то все они должны быть расположены без пробелов и разделены точкой.
Вот так:
.btn.btn-success.btnlist
Однако, браузер позволяет упростить нам работу. В правой части панели «Инструментов разработчика» есть кнопка в виде символа «+».
Нажмем на нее. И ниже увидим готовое, но пустое правило CSS, а еще ниже все правила относящиеся к отображению этой кнопки.
Кликнем правой кнопкой мышки по появившемуся новому правилу и увидим выпадающий список, где нам будет предложен список вариантов.
Если выбрать вариант «Копировать selector», то получим следующее:
a.btn.btn-success.btnlist
Мы видим, что браузер добавил в начало и сам элемент, который идёт перед точкой. Фактически это не мешает, однако нужно будет учитывать, что данный селектор будет применен только к ссылкам (элементам с тегом <a>) у которых указаны вышеприведенные классы.
Если же мы сотрем название элемента в начале и получим следующее:
.btn.btn-success.btnlist
То такой селектор уже будет относиться ко всем элементам обладающим указанными классами.
Получаем ID элемента
Во-первых, нужно отметить, что далеко не у каждого элемента на странице задан id. Более того, далеко не у каждого элемента задан и класс.
Как правило, ID на странице уникален, а классы могут повторяться.
Безусловно, бывают случаи когда на странице обнаруживаются несколько элементов с одинаковым ID. Однако, это ошибка при вёрстке и разработке.
Итак, на моем сайте есть DIV с ID «wrapper» и классом «z-index».
Выделяем его мышкой.
Далее, в правой части экрана, нажмём все ту же кнопку «+» и увидим новое пустое правило.
На этот раз браузер также поставил в начало сам элемент, а далее, после символа «#» написал ID элемента.
Как мы видим, для указания класса ставится точка в начале, а для указания ID — символ решетки.
С точки зрения браузера, ID приоритетнее классов.
Поэтому там, где у элемента указан и ID и класс, при клике на знак плюса, нам будет написано правило с ID.
Впрочем, разные браузеры в таком случае поступают по разному.
Как обратиться к элементу, если у него отсутствует класс или id?
Нередко случается ситуация, когда у элемента отсутствует класс или ID.
Или, что ещё неудобнее, когда класс у элемента есть, но при попытке поменять, какое то свойство у элемента (цвет, размер и т. д.) оно меняется на всём сайте. А задача стояла поменять цвет, размер или что-то ещё у конкретного элемента.
И здесь нам на помощь приходят родительские элементы.
Рассмотрим пример обращения к кнопке «Отправить» в форме обратной связи на странице «Контакты».
Если мы запросим класс этой кнопки, то получим следующий набор:
.btn.btn-primary.validate
Все эти классы часто встречаются на других страницах и при попытке поменять свойство кнопки, мы рисковали бы поменять его и у других элементов сайта.
Однако, при детальном просмотре кода, мы видим, что кнопка расположена внутри формы, у которой задан ID элемента. Его значение «contact-form».
Таким образом, мы можем обратиться к нашей кнопке следующим образом:
#contact-form .btn.btn-primary.validate
В начале указывается селектор родительского элемента, а далее, через пробел класс кнопки.
А что делать, если у нашей кнопки не было бы класса?
В таком случае мы должны были бы обратиться к ней следующим образом:
#contact-form button
Где в начале ID родительского элемента, а через пробел, собственно, селектор самого элемента.
Заключение
Данная статья не претендует на статус учебника по CSS. Если вам периодически приходится работать с кодом сайта, рекомендую приобрести самоучитель по работе с каскадными таблицами стилей.
Благо, таковых сейчас огромное количество.
Напоминаю!
Если у вас остались вопросы и предложения, их всегда можно озвучить в группе VK по ссылке ниже:
А также в недавно созданной группе Telegram. Ссылка:
С уважением, Владимир Егоров.
