Указать путь css селекторами

Как найти 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)»
>
Теперь перенесем все в окно продвинутого выделения нашего расширения.

Источник

Селекторы CSS для начинающих. Часть 1.

Окей, скажут некоторые мои подписчики и отпишутся от обновлений. Конечно, я понимаю, что во-первых статья для совсем начинающих, во-вторых, довольно много информации есть по этой теме… но тем не менее у многих людей, которые ко мне обращаются, возникают с этим проблемы . А я даже и не знаю, на какую статью им ссылку дать, смотрю одно руководство, смотрю второе, и что-то ни одно из них мне не нравится.

Сейчас я постараюсь пролить немного света на эту тему. Однако скажу, что тут всё очень просто на самом деле — главное не стоит сразу же начинать разбираться с nth-child(even) . Чтобы делать хорошую верстку, достаточно понять, как работают ID, классы и иерархия элементов.

Предлагаю вам на каждый из последующих примеров создать HTML-файл и пробовать все варианты сразу же по ходу дела. Тогда точно всё будет просто и понятно.

Пример 1. Селекторы по ID элемента

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

em style="color: #c1ef65;">"misha_em">Текст курсивом.em> strong style="color: #c1ef65;">"misha_strong">Жирный текст.strong>

HTML5-спецификация допускает использование в качестве названия атрибута ID довольно большой набор символов, но я ограничиваюсь буквами латинского алфавита + символ подчеркивания _ + цифры, мне этого хватает.

/* чтобы обратиться к элементу с конкретным ID через CSS, добавим перед ним # */ #misha_em{ color:#888; /* серый цвет для курсива */ } #misha_strong{ color:#fe0000; /* красный для жирного текста */ }

Как обратиться к нескольким элементам одновременно

Очень просто — перечислить их через запятую:

#misha_em, #misha_strong{ text-tansform: uppercase; /* конечно мы недостаточно выделили наш текст, пусть еще будет в верхнем регистре */ }

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

Пример 2. Селекторы по классам

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

em style="color: #c1ef65;">"misha_em" style="color: #c1ef65;">"misha_text">Текст курсивом.em> strong style="color: #c1ef65;">"misha_strong" style="color: #c1ef65;">"misha_text">Жирный текст.strong>

Переделаем предыдущий пример и получим:

/* чтобы обратиться к элементам класса, добавим перед ним точку */ .misha_text{ text-tansform: uppercase; /* оба элемента и будут переведены в верхний регистр */ }

Также мы можем обратиться ко всем элементам жирного текста с классом .misha_text , добавив перед точкой название тега элемента:

/* обращаемся ко всем класса misha_text */ strong.misha_text{ color:#fe0000; }

Очень кратко про приоритеты

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

Тут может показаться, что элементу должен быть присвоен цвет #fe0000 , так как это значение свойства указано в последнюю очередь, однако всё совсем не так.

.misha_text{ color:#fff !important; /* если после значения свойства указать !important - это самый высочайший приоритет */ } #misha_strong { color:#eee; /* у ID приоритет выше, чем у классов, это правило будет считаться важнее, чем .misha_text */ } .misha_text{ color:#fe0000; }

Подытожу: если абсолютно разным элементам нужно присвоить одинаковые стили, вы можете объединить их по классу.

Пример 3. Селекторы по HTML тегам. «Путешествие» по дереву DOM

Дерево — это иерархия всех HTML-тегов на странице.

и
— элементы списка, — жирный текст,

— абзац.

div> ul> li>Элемент списка 1li> li>Элемент списка 2li> li>strong>Жирныйstrong> элемент списка 3li> ul> div> p>strong>Жирный текст внутри абзацаstrong>p>

К каждому из типов этих элементов можно обратиться по CSS, например:

div{ background-color:#eee; /* ко всем div (а он у нас один в примере) будет применен светло-серый фон */ } li{ color:green; /* текст элементов списка станет зелёного о_О цвета */ } strong{ background-color:#ff0000; /* фон всех элементов strong станет красного цвета */ }

Думаю тут пока понятно, пишем название любого HTML тега в CSS и прописанные вами правила применятся для каждого указанного тега на вашей HTML-странице.

А что если мы хотим изменить стиль только того жирного текста, который находится внутри абзаца? Или вдруг нам нужно, чтобы жирный текст внутри абзаца и внутри списка отличались по стилям?

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

, который в свою очередь находится внутри элемента
, который в свою очередь находится внутри элемента , и необязательно, чтобы эти элементы шли друг за другом последовательно. то есть может быть и так: div p ol li ul li p strong */ div ul li strong{background-color:#ff0000;}/* ситуация точно такая же, необязательно элемент должен сразу идти после элемента

, это может быть и: p span strong */ p strong{background-color:#aaa;}

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

Для начала — зачем нам указывать полный путь к элементу, ведь достаточно и одного:

div strong{ background-color:#ff0000; } p strong{ background-color:#aaa; }

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

/* сначала для всех делаем красный фон */ strong{ background-color:#ff0000; } /* а потом перезаписываем правила для тех , которые находятся внутри абзацов 
*/ p strong{ background-color:#aaa; }

Вот и всё, в принципе информации из этого поста должно быть достаточно для создания верстки практически любой сложности. Тем не менее, я также выпущу вторую часть поста «Селекторы CSS для продвинутых» на следующей неделе.

Смотрите также

Миша

Впервые познакомился с WordPress в 2009 году. Организатор и спикер на конференциях WordCamp. Преподаватель в школе Нетология.

Пишите, если нужна помощь с сайтом или разработка с нуля.

Источник

Как лучше задать путь к элементу css?

Уважаемые верстальщики, хотел спросить у вас, как лучше написать код css.
С помощью псевдоклассов?

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

Задайте себе такой вопрос:
Если этот элемент поменяет свою позицию, и станет скажем вторым, то стили всё равно должны применяться именно к нему или уже к другому элементу?
В первом случае — добавляйте класс. Только не first , а что-то более осмысленное. Во втором — используйте псевдоклассы

Допустим у меня элемент не поменяет свою позицию, использование псевдокласса будет правильным?
Не добавляя класса к html элементу я хоть его чуть облегчу

carbanak01, чего? и каким образом ты его облегчишь? Верстальщики придумали методологии, как раз из-за селекторов, чтобы если что-то добавилось верстка не ехала. А если и поехала исправить можно было безболезненно.

WapSter, я про облегчение, просто сказал. Мне главное узнать: Допустим у меня элемент не поменяет свою позицию, использование псевдокласса будет правильным?

carbanak01, Вы не правильно думаете. Задавайте себе именно тот вопрос и именно в той формулировке что я написал. Это нужно для того, чтобы вы для себя понимали: стили относятся к конкретному элементу или именно к первому. Не думайте «Это точно не изменится»! Думайте «Гипотетически, если это изменится, что тогда?»

Источник