Css селектор атрибута содержит

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

У этого элемента три атрибута: id, class и rel. Обратиться к этому элементу в CSS вы можете либо по его идентификатору (#first-title), либо по имени класса (.magical). Однако знали ли вы, что вы также можете обратиться к нему, используя атрибут rel? Это и называется селекторы по атрибутам:

Существует множество вариантов их использования. Давайте разберёмся более детально с различными опциями и попытаемся придумать сценарии использования атрибутов в реальной жизни.

[rel = external]
Атрибут точно соответствует заданному значению

В приведённом выше примере, атрибут элемента h2 был равен «friend». Селектор, который мы написали ссылался на него, поскольку значение атрибута точно равно «friend». Именно точное. Давайте посмотрим на другой пример:

Более реальный пример — стилизация блогролла (blogroll). Скажем у вас есть список ссылок на дружественные сайты:

Jeff Starr David Walsh Richard Felix

И вы хотите задать каждой ссылке свой стиль. Традиционный подход состоит в том, что каждой ссылке указывается класс, но этот подход требует дополнительной разметки. Другой способ — это использование псевдоселектора nth-child. Однако этот подход требует определённого порядка элементов. Эта проблема идеально подходит для применения селекторов по атрибутам, поскольку ссылки уже являются уникальными.

a[href=http://perishablepress.com]

Я уверен, что наиболее часто этот тип селектора используется для элементов input (text, radio и т.п.). Все эти элементы сильно отличаются друг от друга, и писать что-нибудь типа input в большинстве случаев не лучшая идея. Гораздо чаще используется следующая запись:

input[type=text] < padding: 3px; >input[type=radio]

Это единственный способ стилизовать элементы input без дополнительной разметки и всяческих ухищрений.

[rel *= external]
Атрибут содержит заданное значение.

Теперь начинаются более интересные вещи. Знаку равенства в селекторе по атрибуту может предшествовать другой знак, который меняет назначение его использования. Например, «*=» означает «заданное значение может находиться где угодно в значении указанного атрибута». Взгляните на следующий пример:

Не забывайте, что идентификаторы и классы — это тоже атрибуты и вы можете их в селекторах по атрибутам. Итак, давайте предположим, что вы пишете CSS для сайта, в котором вы не имеете доступа к разметке, а неопытный разработчик оставил вам такое:

Вы можете подсветить все эти элементы следующим образом:

[rel ^= external]
Атрибут начинается с заданного значения

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

a[href^=http://perishablepress.com]

[rel $= external]
Атрибут заканчивается на заданное значение

Если есть возможность сделать выбор по началу значения атрибута, то почему не быть и обратной возможности?

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

[rel ~= external]
Атрибут находится в списке, разделённом пробелами

Как вы уже знаете, вы можете указать несколько классов стилей для одного элемента. И если вы делаете именно так, то вы можете использовать имя класса для доступа к элементу в CSS. В случае использования селекторов по атрибуту, не всё так просто. Если атрибуту rel присвоено несколько значений (разделённых пробелами), то вам необходимо использовать «~=»;

Attribute Space Separated

Вы можете подумать, почему бы нам не использовать в этом случае «*=» ? Действительно, такой вариант использования более гибок, однако он может быть слишком гибок. Рассматриваемый селектор требует, чтобы значение отделялось пробелом, а «*=» — нет. Таким образом, если у вас есть два элемента (один с rel=home friend-link, а второй с rel=home friend link), то вам необходимо использовать селектор для случая с пробелами, чтобы выбрать только второй элемент.

[rel |= external]
Атрибут находится в списке, разделённом дефисами

Список, разделённый дефисами очень похож на описанный выше список разделённый пробелами. Но опять же есть свои особенности перед использованием селектора с «*=».

[title = one][rel ^= external]
Соответствие по нескольким атрибутам

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

h1[rel=handsome][title^=Important]

Поддержка браузерами

Каждый пример, приведённый выше, работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE7 и выше.

Источник

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

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

Пример

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

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

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

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

Как пишется

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

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

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

[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 . Можно визуально разделять ссылки, ведущие на соседние страницы сайта, и ссылки, ведущие на другие сайты:

 О насДоставкаКонтактыМы на Medium a href="http://mysite.ru/about">О насa> a href="http://mysite.ru/delivery">Доставкаa> a href="http://mysite.ru/contacts">Контактыa> a href="http://medium.com/mysite-blog">Мы на Mediuma>

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

 [href^="http"]::after  content: ''; display: inline-block; background-image: url(arrow-top-right.svg);> [href^="http"]::after  content: ''; display: inline-block; background-image: url(arrow-top-right.svg); >

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

 [href*="/mysite.ru/"]::after  display: none;> [href*="/mysite.ru/"]::after  display: none; >

Источник

Css селектор атрибута содержит