Как обратиться к элементу css
Перейти к содержимому

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

  • автор:

Продвинутые CSS-селекторы, о которых вы не знали

В каскадных таблицах стилей элементам страницы присваиваются значения атрибутов id и CSS class для того, чтобы стилизовать их. Но что делать, если у вас нет доступа к коду, чтобы добавить эти? К счастью существуют динамические селекторы, которые являются единственным решением в этой ситуации.

Обновлено: 2021-07-14 19:23:20 ВЛ Виктория Лебедева автор материала

Введение

Дальше я собираюсь рассказать о работе селекторов атрибутов, но рекомендую с самого начала применять идентификаторы и классы, так как использование селекторов не всегда полезно. В процессе поиска элемента ( CSS или JavaScript ) браузеру приходиться « обойти » весь DOM страницы, чтобы найти нужный.

При использовании селекторов атрибутов на поиск затрачивается больше ресурсов и времени. Поэтому не стоит злоупотреблять селекторами и применять вместо них CSS id или class . Их нужно использовать только в том случае, если нет другого выхода. Например, когда HTML-код генерируется динамически, и вы никак не можете добавить в него классы или идентификаторы.

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

($=) – атрибут оканчивается определенным значением

Выбор элемента с помощью CSS , значение которого заканчивается определенным символом ( суффиксом ) выглядит следующим образом:

div[id$=“_myDiv”] < // CSS правило >

Атрибут id$ находится внутри скобок элемента div . Обратите внимание, что вместо тега div можно указать любой другой HTML-элемент от input до span и так далее. Этот пример идеально подойдет для выбора элемента, если суффикс внутри атрибутов формируется динамически.

  
Какой-то текст

CSS как обращаться к вложенному классу

В примере выше мы имеем 3 селектора – это p, div span, ul li. То есть весь наш файл стилей состоит из селекторов и их свойств. Наиболее удобно и наглядно, особенно новичкам, брать за селектор имя класса (class) тега или уникальный идентификатор (id) тега. Чтобы присвоить класс или идентификатор какому-либо тегу, мы должны указать их среди атрибутов этого тега. У конкретного тега может быть максимум 1 идентификатор и бесконечное число классов. Пример:

текст в первом диве
текст во втором диве
текст в третьем диве

На что стоит обратить внимание:

  • Классы и идентификаторы можно присваивать любым (всем) тегам.
  • Каждый id уникален и не может повторяться в пределах одной страницы, в отличие от классов!
  • Один и тот же класс может быть присвоен любым тегам и может повторяться любое количество раз на странице.
  • Если мы хотим задать конкретному тегу несколько классов, мы просто задаём их через пробел.
  • Имена классов и идентификаторов могут совпадать, при этом кроме имени, ничего общего между ними не будет.

Как обратиться к классу или id в файле стилей (CSS)?

#first /* обращаемся к id с именем first */ .second /* обращаемся к классу с именем second */ #first .second /* обращаемся к классу с именем second, ТОЛЬКО если он находится ВНУТРИ тега с идентификатором first */ .first .third /* обращаемся к классу с именем third, ТОЛЬКО если он находится ВНУТРИ тега с классом first */ 

В нашем случае последние две инструкции не сработают, так как у нас нет классов, вложенных внутрь тегов с заданными атрибутами. Как вы могли заметить, чтобы обозначить, что мы обращаемся именно к id, нужно перед его именем без пробелов поставить знак решётки (#), если мы обращаемся к классу, то перед именем класса должны поставить точку (.).

Селектор по атрибуту

Селектор по атрибуту находит элемент на странице по значению либо по наличию атрибута.

Пример

Скопировать ссылку «Пример» Скопировано

   Октябрь уж наступил — уж роща отряхает Последние листы с нагих своих ветвей;  blockquote cite="А. С. Пушкин"> Октябрь уж наступил — уж роща отряхаетbr> Последние листы с нагих своих ветвей; blockquote>      

Селектор ниже найдёт все цитаты ( ) с атрибутом cite :

 blockquote[cite]  background-color: #2E9AFF;> blockquote[cite]  background-color: #2E9AFF; >      

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

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

[attr ]

Скопировать ссылку «[attr]» Скопировано

Селектор выберет все элементы, у которых присутствует атрибут attr .

  button disabled>OKbutton>      
 [disabled]  opacity: 0.5;> [disabled]  opacity: 0.5; >      

[attr = value ] или [attr = «value» ]

Скопировать ссылку «[attr=value] или [attr=»value»]» Скопировано

Селектор выберет все элементы, атрибут attr которых в точности равен value .

Если в значении атрибута есть пробелы или знаки, отличные от цифр и букв, то значение нужно указывать в кавычках. В остальных случаях кавычки не обязательны.

 Пустая ссылка Эта ссылка не стилизуется a href="#">Пустая ссылкаa> a href="#one">Эта ссылка не стилизуетсяa>      
 [href="#"]  color: red;> [href="#"]  color: red; >      

[attr ~ = value ]

Скопировать ссылку «[attr~=value]» Скопировано

Селектор выбирает все элементы, значение атрибута attr это перечень слов, разделённых пробелом, и среди этих слов есть такое, чьё значение равно value .

 
.
.
blockquote cite="Александр Сергеевич Пушкин">. blockquote> blockquote cite="Лев Николаевич Толстой ">. blockquote>
 [cite~="Пушкин"]  border: 1px solid green;> [cite~="Пушкин"]  border: 1px solid green; >      

[attr| = value ]

Скопировать ссылку «[attr|=value]» Скопировано

Селектор выберет все элементы, значение атрибута attr которых либо в точности равно value , либо начинается с value , за которым следует символ дефиса — (U+002D). Подобный вариант селектора чаще всего используется для выбора по коду языка (например en — U S или en — G B ).

 
Hello World!
世界您好!
世界您好!
div lang="en-us en-gb en-au en-nz">Hello World!div> div lang="zh-CN">世界您好!div> div lang="zh-TW">世界您好!div>
 [lang|="en"]  color: blue;> [lang|="en"]  color: blue; >      

Выберет два других :

 [lang|="zh"]  color: red;> [lang|="zh"]  color: red; >      

[attr^ = value ]

Скопировать ссылку «[attr^=value]» Скопировано

Селектор выберет все элементы, значение атрибута attr которых начинается с value .

 Ссылка по протоколу HTTPSСсылка по протоколу HTTP a href="https://secure.com/">Ссылка по протоколу HTTPSa> a href="http://secure.com/">Ссылка по протоколу HTTPa>      

У ссылок по протоколу HTTPS справа отображается замок:

 [href^="https"]::after  content: "��"; margin-left: 3px;> [href^="https"]::after  content: "��"; margin-left: 3px; >      

[attr$ = value ]

Скопировать ссылку «[attr$=value]» Скопировано

Селектор выберет все элементы, значение атрибута attr которых оканчивается на value .

 Apple USApple RussiaApple Italy a href="https://apple.com/">Apple USa> a href="https://apple.com/ru">Apple Russiaa> a href="https://apple.com/it">Apple Italya>      
 a::after  content: "����";>a[href$="/ru"]::after  content: "����";>a[href$="/it"]::after  content: "����";> a::after  content: "����"; > a[href$="/ru"]::after  content: "����"; > a[href$="/it"]::after  content: "����"; >      

[attr* = value ]

Скопировать ссылку «[attr*=value]» Скопировано

Селектор выберет все элементы, атрибут attr которых содержит в себе значение value .

  img src="/img/myadvertisingbanner.png"> img src="/img/other-advert-banner.png"> img src="/img/Advert-image.png">      

Спрячет две первых рекламных картинки. Оба изображения в атрибуте src содержат подстроку advert.

 img[src*="advert"]  display: none;> img[src*="advert"]  display: none; >      

Третья картинка не спрячется, потому что не совпал регистр символов. Advert и advert — это разные значения с точки зрения браузера.

[attr operator value i ]

Скопировать ссылку «[attr operator value i]» Скопировано

Если добавить в скобки после значения атрибута i или I , то браузер будет игнорировать регистр символов.

  img src="/img/myadvertisingbanner.png"> img src="/img/other-advert-banner.png"> img src="/img/Advert-image.png">      

Теперь будут спрятаны все три картинки

 img[src*="advert" i]  display: none;> img[src*="advert" i]  display: none; >      

На практике

Скопировать ссылку «На практике» Скопировано

Денис Ежков советует

Скопировать ссылку «Денис Ежков советует» Скопировано

�� При помощи селектора по атрибуту круто стилизовать ссылки, основываясь на значении атрибута href . Можно визуально разделять ссылки, ведущие на соседние страницы сайта, и ссылки, ведущие на другие сайты:

 О насРассылкаУчастникиМы в Telegram a href="https://doka.guide/about/">О насa> a href="https://doka.guide/subscribe/">Рассылкаa> a href="https://doka.guide/people/">Участникиa> a href="https://t.me/+qYFPI2mExuQxZTFi">Мы в Telegrama>      

Все ссылки будут с иконкой стрелочки:

 a::after  content: ''; display: inline-block; background-image: url(arrow-top-right.svg);> a::after  content: ''; display: inline-block; background-image: url(arrow-top-right.svg); >      

Внутренние ссылки — без иконок:

 [href*="/doka.guide/"]::after  display: none;> [href*="/doka.guide/"]::after  display: none; >      

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

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

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

Селекторы наличия и значения

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

Селектор Пример Описание
[attr] a[title] Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value] a[href=»https://example.com»] Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
[attr~=value] p[class~=»special»] Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.
[attr|=value] div[lang|=»zh»] Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.

В приведённом ниже примере вы можете увидеть использование этих селекторов.

  • Используя li[class], мы можем выбрать каждый селектор с атрибутом класса. Это соответствует всем пунктам списка, за исключением первого.
  • li[class=»a»] выбирает селектор с классом a , но не селектор с классом a в сочетании с другим, отделённым запятой, классом как частью значения. Он выбирает второй пункт списка.
  • li[class~=»a»] выберет класс a , а также значение, которое содержит класс a как часть разделённого пробелом списка. Он выберет второй и третий пункты списка.

Селекторы вхождения подстроки

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со строки «box-«, вы можете использовать [class^=»box-«] , чтобы выбрать оба класса (или [class|=»box»] как описано в предыдущем разделе).

Селектор Пример Описание
[attr^=value] li[class^=»box-«] Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
[attr$=value] li[class$=»-box»] Выбирает элементы с атрибутом attr, значение которого заканчивается на value.
[attr*= ] li[class*=»box»] Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки.

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

Следующий пример показывает, как используются эти селекторы:

  • li[class^=»a»] выбирает все значения атрибута, которые начинаются с a , что соответствует первым двум элементам списка.
  • li[class$=»a»] выбирает все значения атрибута, которые заканчиваются на a , что соответствует первому и третьему элементу списка.
  • li[class*=»a»] выбирает все значения атрибута, где появляется a , независимо от положения в строке, что соответствует всем элементам нашего списка.

Чувствительность к регистру

Если вы хотите выбрать значения атрибута без учёта регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учёта регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

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

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

Следующие шаги

Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 2 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *