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

11 сен 12:29

---

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

Что такое CSS?

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

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

Простые селекторы

Самыми простыми селеткорами является выборка элементов по классу (class) и id. Пример html кода:

<div class="article" id="art">Артикул: <span class="val">12345</span></div>

Как человек вы прекрасно понимаете, что артикул тут - 12345. Разберемся как составить CSS селектор для его выборки.

Мы видим два вложенных элемента: div и span. Абсолютно без разницы что они делают и значат. Браузер вам все равно подскажет. Смотреть нужно на значения class и id (значения указаны после знака равно в кавычках).

Чтобы "выбрать" элемент по id он указывается с решеткой впереди. Например: #art

Такой селектор "приведет" вас к элементу с id="art", но чтобы получить значение артикула, нам нужно идти чуть дальше. Мы видим далее span с классом val.

Классы в CSS указываются через точку: .val

Поскольку элементов с классом val может быть много на странице, мы соединим селекторы через пробел, чтобы они дополняли друг друга и получим: #art .val

Такой селектор сначала найдет элемент с id="art", а затем внутри него найдет элемент с классом val

Реальный пример

Это все теория, теперь к практике. Возьмем вполне реальный (хоть и ничего не продающий) сайт https://example.q-parser.ru/item/1 и для примера составим селектор для выборки бренда (Accoba, в нашем случае).

• Открываем эту страницу в браузере Chrome (вы можете использовать другой, принцип будет плюс-минус одинаковый).
• Щелкаем на бренде правой кнопкой мыши и выбираем Inspect (в русской версии будет "Просмотр кода элемента" или подобное)

Chrome с радостью откроет панель разработчика на нужной вкладке и покажет вам исходный HTML код страницы, а так же сразу найдет указанный вами элемент. У нас получилось так:

Здесь мы видим, что нужный нам блок с брендом имеет class="brand". Chrome услужливо показывает (внизу панели) всю цепочку вложенности. Можно ориентироваться по ней, чтобы составить более конкретный селектор.

.detail .short-info .brand

Так же можно щелкнуть на элементе правой кнопкой мыши, выбрать Copy (Копировать), затем Copy selector (Копировать селектор) и в буфер обмена скопируется полный селектор элемента:

body > div.content > div > div.short-info > div.brand

Мы не рекомендуем использовать настолько точный селектор. Все же лучше составлять что-то более короткое и универсальное. Как минимум, уберите body из начала селектора (иначе на некоторых парсерах выборка может не сработать).

Бонус: AI для составления селекторов

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

Можно прислать боту часть html кода (весь не получится, он очень большой) и попросить написать CSS селектор для выборки "воон того значения". Он отлично с этим справляется.