Где найти селектор css

Селекторы CSS

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

Необходимые знания:	Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:	Узнать, как работают CSS-селекторы.

Что такое селекторы?

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

Ранее вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special .

В CSS селекторы определяются в спецификации CSS-селекторов; как и другие части CSS, нужно поддерживать их работу в браузерах. Большинство селекторов, которые вы встретите, определены в Спецификации селекторов 3 уровня, где вы сможете найти всю информацию о поддержке селекторов в браузерах.

Несколько селекторов

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special ; я могу написать их так:

h1  color: blue; > .special  color: blue; > 

А могу написать короче — просто отделив селекторы запятыми:

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

h1  color: blue; > ..special  color: blue; > 

Но если мы объединим селекторы, правило не применится ни к h1 , ни к классу: оно считается недействительным.

Типы селекторов

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

Селекторы тегов, классов и идентификаторов

К этой группе относятся селекторы HTML-элементов, таких как .

К группе относятся и селекторы классов:

или селекторы идентификаторов (ID):

Селекторы атрибутов

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

или основываясь на значении атрибута:

Псевдоклассы, псевдоэлементы

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover , например, применяет правило, только если на элемент наведён курсор мыши

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца

в нашем случае), действуя, как если бы тег оборачивал первую строку, а затем был стилизован.

Комбинаторы

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент с помощью комбинатора дочерних элементов ( > ):

Продолжение

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

Справка о селекторах

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

Селектор	Пример	Руководство
Селектор по типу	h1	Селектор по типу
Универсальный селектор	*	Универсальный селектор
Селектор класса	.box	Селекторы классов
Селектор ID	#unique	Селекторы по ID
Селектор атрибутов	a[title]	Селекторы атрибутов
Селектор псевдоклассов	p:first-child	Псевдоклассы
Селектор псевдоэлементов	p::first-line	Псевдоэлементы
Селектор потомков	article p	Селектор потомков
Селектор дочерних элементов	article > p	Селектор дочерних элементов
Смежные селекторы	h1 + p	Смежные селекторы
Селектор братских элементов	h1 ~ p	Селектор братских элементов

В этом модуле

1. Каскад и наследование
2. CSS-селекторы
   • Селекторы по типу, классу и идентификатору
   • Селекторы атрибутов
   • Псевдоклассы, псевдоэлементы
   • Комбинации селекторов
3. Блоки в CSS
4. Фон и границы
5. Изменение направления текста
6. Перекрытие содержимого
7. Значения свойств CSS
8. Изменение размеров в CSS
9. Изображения, формы и прочие медиа-элементы
10. Стилизация таблиц
11. Отладка CSS
12. Организация CSS-кода

Found a content problem with this page?

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

Как найти CSS селектор нужного элемента на странице товара.

С помощью CSS селекторов можно найти путь, по которому находится нужный элемент.
Мы разберем пример как можно подобрать нужный вам селектор с использованием возможностей браузера Chrome. Откроем в браузере страницу необходимого нам товара, например в маркете. Мы знаем что для использования нашего расширения нам необходимо выделить 3 атрибута товара

Далее мы будем подбирать селекторы именно для этих элементов.
Кликнем правой кнопкой мыши на название товара и выберем пункт меню “Посмотреть код”.

Откроется встроенный в браузер инструмент ChromeDevTools, который отразит во вкладке “Elements” весь html код страницы. При этом будет подсвечен тот тэг, который относится к выбранному вами элементу.

Разберемся что такое тэг — это элемент который представляет ассоциированное ключевое слово, он может быть как одиночным (
— перенос на другую строку), так и парным: открывающим (

) и закрывающим (

). Парные тэги заключают между собой информацию которая видна на странице. Также тэг может быть снабжен одним или несколькими атрибутами. Атрибут состоит из названия и значения.

Дальше мы кликаем правой кнопкой мыши по выделенному тэгу. В выпадающем меню выбираем “Copy” и далее “Copy selector”. Селектор находится у нас в буфере обмена, далее мы можем поместить данный селектор в окно нашего расширения.

Важна уникальность CSS селектора, так как в противном случае сбор данных будет не точным и бесполезным. Проверить уникальный код можно прямо через вкладку “Elements”: нажмите сочетание клавиш Ctrl + F и укажите скопированный вами селектор в поисковой строке вкладки “Elements”, и количество подобных селекторов на странице отобразится в правом углу поисковой строки.

Точно таким же способом найдем CSS селектор изображения товара, но возьмем для примера другой интернет магазин. Здесь в карточке товара есть элемент карусель и по умолчанию первым изображением является видео товара. Нам необходимо для начала выбрать изображение и кликнув правой кнопкой мыши выбрать “Посмотреть код”

Снова видим во вкладке “Elements” выделенный тэг, который относится к данному изображению. Кликаем правой кнопкой мыши, выбираем “Copy” и далее “Copy selector”.

Аналогично поступаем с ценой. В нашем примере есть 2 цены: одна со скидкой и одна без. Кликаем нужную нам цену правой кнопкой мыши, и далее выше описанным способом копируем селектор данной цены.

Скопированные селекторы вы помещаете в окне нашего расширения, снабдив их соответствующими атрибутами:
“image”:”*тут размещаете селектор изображения товара*”;
“price”:”*тут размещаете селектор цены товара*”>
например:

«title»: «body > div._111XI.main > div:nth-child(5) > div > div:nth-child(5) > div > div._3faMG._1k7g2._2p5aS > div.ULRXT.cia-cs > div._3faMG._3YZTV > div > div:nth-child(3) > div > div > h3»,
«image»: «body > div._111XI.main > div:nth-child(5) > div > div:nth-child(5) > div > div._3faMG._1k7g2._2p5aS > div.ULRXT.cia-cs > div._3faMG._3YZTV > div > div:nth-child(6) > div > div > div > a > img»,
«price»: «body > div._111XI.main > div:nth-child(5) > div > div:nth-child(5) > div > div:nth-child(2) > section > div:nth-child(2) > div > div > div > div > div:nth-child(2) > div.KnVez > div > div > span > span:nth-child(1)»
>
Теперь перенесем все в окно продвинутого выделения нашего расширения.

Источник