Сачок, в который поймана белая рыба. Чёрные рыбы плавают в реке
Иллюстрация: Кира Кустова

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

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

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

Пример

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

        
        
          
        
      

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

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

        
        
          
        
      
Открыть демо в новой вкладке

Как пишется

Секция статьи "Как пишется"

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

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

[attr]

Секция статьи "[attr]"

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

        
          
          <button disabled>OK</button>
          <button disabled>OK</button>

        
        
          
        
      
        
          
          [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>
          <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>
          <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-US или en-GB).

        
          
          <div lang="en-us en-gb en-au en-nz">Hello World!</div><div lang="zh-CN">世界您好!</div><div lang="zh-TW">世界您好!</div>
          <div lang="en-us en-gb en-au en-nz">Hello World!</div>
<div lang="zh-CN">世界您好!</div>
<div lang="zh-TW">世界您好!</div>

        
        
          
        
      

Выберет первый <div>:

        
          
          [lang|="en"] {  color: blue;}
          [lang|="en"] {
  color: blue;
}

        
        
          
        
      

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

        
          
          [lang|="zh"] {  color: red;}
          [lang|="zh"] {
  color: red;
}

        
        
          
        
      

[attr^=value]

Секция статьи "[attr^=value]"

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

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

        
        
          
        
      

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

        
          
          [href^="https"]::after {  content: "🔐";  margin-left: 3px;}
          [href^="https"]::after {
  content: "🔐";
  margin-left: 3px;
}

        
        
          
        
      

[attr$=value]

Секция статьи "[attr$=value]"

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

        
          
          <a href="https://apple.com/">Apple US</a><a href="https://apple.com/ru">Apple Russia</a><a href="https://apple.com/it">Apple Italy</a>
          <a href="https://apple.com/">Apple US</a>
<a href="https://apple.com/ru">Apple Russia</a>
<a href="https://apple.com/it">Apple Italy</a>

        
        
          
        
      
        
          
          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">
          <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;
}

        
        
          
        
      

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

        
          
          <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">Мы на Medium</a>
          <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">Мы на Medium</a>

        
        
          
        
      

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

        
          
          [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;
}

        
        
          
        
      
Открыть демо в новой вкладке