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

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

1. Простой селектор атрибута

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

Рассмотрим синтаксис:

[<атрибут>] { Описание правил стиля }
E[<атрибут>] { Описание правил стиля }

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

Пример:

<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   textarea {
    height: 100px; /* Высота поля */
   }
   textarea[readonly] {
    background: #f0f0f0; /* Цвет фона */
    opacity: 0.8; /* Значение прозрачности */
   }
  </style>
 </head>
 <body>
  <textarea>Это обычное текстовое поле, его можно редактировать.</textarea>
  <textarea readonly>Это текстовое поле только для чтения, вы не можете его изменить.</textarea>
 </body>
</html>

2. Атрибут со значением

Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута. Синтаксис:

[атрибут="значение"] { Описание правил стиля } 
Селектор[атрибут="значение"] { Описание правил стиля }

В примере установим стиль для элемента <input>, основываясь на его значении:

 <html>
  <head>
   <meta charset="utf-8">
   <title>Селекторы атрибутов </title>
   <style>
   input[type="number"] {
    border: 1px solid red; /* Параметры рамки */
    border-radius: 4px; /* Радиус скругления */
    width: 3em; /* Ширина */
    padding: 5px; /* Поля */
   }
   </style>
  </head>
  <body>
   <form>
    <p>Ваше имя:  <input name="name"> </p>
    <p>Возраст: <input type="number" name="age" value="20"> </p>
    <p> <input type="submit" value="Отправить"> </p>
   </form>
  </body>
 </html>

3. Значение атрибута начинается с определённого текста

Устанавливает стиль для элемента в том случае, если значение атрибута тега начинается с указанного текста. Синтаксис:

[атрибут^="значение"] { Описание правил стиля } 
Селектор[атрибут^="значение"] { Описание правил стиля }

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

Рассмотрим пример где сделаем жирными ссылки, адреса которых начинаются с ключевого слова https://:

<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   a[href^="https://"] { 
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body> 
  <p><a href="page/new.html">Обычная ссылка</a> | 
  <a href="https://ya.ru">Ссылка на ya.ru</a> |
  <a href="https://google.ru">Ссылка на google.ru</a></p> 
 </body>
</html>

4. Значение атрибута оканчивается определённым текстом

Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом. Синтаксис:

[атрибут$="значение"] { Описание правил стиля } 
Селектор[атрибут$="значение"] { Описание правил стиля }

В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным текстом. А во втором — только к определённым селекторам.

Рассмотрим пример:

<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
    background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ 
    padding-left: 12px; /* Смещаем текст вправо */ 
   } 
   A[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url(images/com.png) no-repeat 0 6px; 
    padding-left: 12px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com">Yandex.Com</a> | 
     <a href="http://www.yandex.ru">Yandex.Ru</a></p>
 </body>
</html>

5. Значение атрибута содержит указанный текст

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

[атрибут*="значение"] { Описание правил стиля } 
Селектор[атрибут*="значение"] { Описание правил стиля }

Рассмотрим пример:

 <html>
  <head>
   <meta charset="utf-8">
   <title>Селекторы атрибутов </title>
   <style>
   [href*="htmlbook"] { 
    background: yellow; /* Желтый цвет фона */
   }
   </style>
  </head>
  <body>
   <p> <a href="https://www.it-black.ru/html/">Теги HTML </a> | 
   <a href="https://stepbystep.htmlbook.ru">Шаг за шагом </a> | 
   <a href="https://webimg.ru">Графика для Веб </a></p>
  </body>
 </html>

6. Одно из нескольких значений атрибута

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

[атрибут~="значение"] { Описание правил стиля } 
Селектор[атрибут~="значение"] { Описание правил стиля }

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

<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Блок</title>
  <style> 
   [class~="block"] h3 { color: green; } 
  </style> 
 </head>  
 <body> 
  <div class="block tag"> 
   <h3>Заголовок</h3> 
  </div> 
 </body>
</html>

В данном примере зелёный цвет текста применяется к селектору H3, если имя класса у слоя задано как block.