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

    CSS

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

    Находим элемент на странице по конкретному атрибуту.

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

    Кратко

    Скопировано

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

    Пример

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

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

            
          
          blockquote[cite] {  background-color: #2E9AFF;}
          blockquote[cite] {
  background-color: #2E9AFF;
}
    Открыть демо в новой вкладке

    Как пишется

    Скопировано

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

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

    [attr]

    Скопировано

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

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

        
        
          
        
      
            
          
          [disabled] {  opacity: 0.5;}
          [disabled] {
  opacity: 0.5;
}

    [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.

            
          
          <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, либо начинается с 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.

            
          
          <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.

            
          
          <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.

            
          
          <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]

    Скопировано

    Если добавить в скобки после значения атрибута 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="https://doka.guide/about/">О нас</a><a href="https://doka.guide/subscribe/">Рассылка</a><a href="https://doka.guide/people/">Участники</a><a href="https://discord.gg/NjaevcW8k8">Мы в Discord</a>
          <a href="https://doka.guide/about/">О нас</a>
<a href="https://doka.guide/subscribe/">Рассылка</a>
<a href="https://doka.guide/people/">Участники</a>
<a href="https://discord.gg/NjaevcW8k8">Мы в Discord</a>

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

            
          
          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;
}
    Открыть демо в новой вкладке

    Читайте также