Содержание

Селекторы атрибутов | htmlbook.ru

Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление правил стиля к селектору INPUT применит стиль одновременно ко всем созданным с помощью этого тега элементам. Чтобы гибко управлять стилем подобных элементов, в CSS введены селекторы атрибутов. Они позволяют установить стиль по присутствию определённого атрибута тега или его значения.

Рассмотрим несколько типичных вариантов применения таких селекторов.

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

Устанавливает стиль для элемента, если задан специфичный атрибут тега. Его значение в данном случае не важно. Синтаксис применения такого селектора следующий.

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

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

В примере 13.1 показано изменение стиля тега <q>, в том случае, если к нему добавлен атрибут title.

Пример 13.1. Вид элемента в зависимости от его атрибута

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность 
   может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
  <q title="Из законов Фергюссона-Мержевича">После того, как веб-страница 
   будет корректно отображаться в одном браузере, выяснится, 
   что она неправильно показывается в другом</q>.
 
 </p>
 </body>
</html>

Результат примера показан на рис. 13.1.

Рис. 13.1. Изменение стиля элемента в зависимости от применения атрибута title

В данном примере меняется цвет текста внутри контейнера <q>, когда к нему добавляется title. Обратите внимание, что для селектора Q[title] нет нужды повторять стилевые свойства, поскольку они наследуются от селектора Q.

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

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

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

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

В примере 13.2 показано изменение стиля ссылки в том случае, если тег <a> содержит атрибут target со значением _blank. При этом ссылка будет открываться в новом окне и чтобы показать это, с помощью стилей добавляем небольшой рисунок перед текстом ссылки.

Пример 13.2. Стиль для открытия ссылок в новом окне

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[target="_blank"] { 
    background: url(images/blank.png) 0 6px no-repeat; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
   <p><a href="1.html">Обычная ссылка</a> | 
   <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

Результат примера показан ниже (рис. 13.2).

Рис. 13.2. Изменение стиля элемента в зависимости от значения target

В данном примере рисунок к ссылке добавляется с помощью свойства background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение no-repeat, что в итоге даст единственное изображение.

=»значение»] { Описание правил стиля }

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

Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются добавлением к адресу протокола, например, для доступа к гипертекстовым документам используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, как показано в примере 13.3.

Пример 13.3. Изменение стиля внешней ссылки

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href^="http://"] { 
    font-weight: bold /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  
  <p><a href="1. html">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank">Внешняя 
  ссылка на сайт htmlbook.ru</a></p>
  
 </body>
</html>

Результат примера показан ниже (рис. 13.3).

Рис. 13.3. Изменение стиля для внешних ссылок

В данном примере внешние ссылки выделяются жирным начертанием. Также можно воспользоваться показанным в примере 13.2 приёмом и добавлять к ссылке небольшое изображение, которое будет сообщать, что ссылка ведёт на другой сайт.

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

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

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

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

Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 13.4.

Пример 13.4. Стиль для разных доменов

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<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>

В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.

Рис. 13.4. Добавление картинки к ссылкам

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

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

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

В примере 13. 5 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».

Пример 13.5. Стиль для разных сайтов

HTML5CSS 2.1IECrOpSaFx

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

Результат данного примера показан на рис. 13.5.

Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»

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

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

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

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

Пример 13.6. Стиль в зависимости от имени класса

HTML5CSS 2.1IECrOpSa 5Fx

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

В данном примере зелёный цвет текста применяется к селектору h4, если имя класса у слоя задано как block. Отметим, что аналогичный результат можно получить, если использовать конструкцию *= вместо ~=.

Дефис в значении атрибута

В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует воспользоваться следующим синтаксисом.

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

Стиль применяется к элементам, у которых атрибут начинается с указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).

Пример 13.7. Дефисы в значениях

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   DIV[class|="block"] {
    background: #306589; /* Цвет фона */
    color: #acdb4c; /* Цвет текста */
    padding: 5px; /* Поля */
   }
   DIV[class|="block"] A {
    color: #fff; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Термины</h3>
   <div>
     <ul>
      <li><a href="t1.html">Буквица</a></li>
      <li><a href="t2. html">Выворотка</a></li>
      <li><a href="t3.html">Выключка</a></li>
      <li><a href="t4.html">Интерлиньяж</a></li>
      <li><a href="t5.html">Капитель</a></li>
      <li><a href="t6.html">Начертание</a></li>
      <li><a href="t7.html">Отбивка</a></li>
     </ul>
   </div>
  </div>
 </body>
</html>

В данном примере имя класса задано как block-menu-therm, поэтому в стилях используется конструкция |=»block», поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

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

Вопросы для проверки

1. =»text2″] { color: red; }

  • P[class~=»text2″] { color: red; }
  • P[class*=»text2″] { color: red; }
  • P[class$=»text2″] { color: red; }

    • 3. К какому элементу будет применяться следующий стиль?

    [class~=»lorem»] { background: #666; }

    1. <p>Lorem ipsum dolor sit amet</p>
    2. <div>Lorem ipsum dolor sit amet</div>
    3. <p>Lorem ipsum dolor sit amet</p>
    4. <div>Lorem ipsum dolor sit amet</div>
    5. <p><span>Lorem ipsum dolor sit amet</span></p>

    Ответы

    1. INPUT[type=»text»] { background: #acdacc; }

    2. P[class*=»text2″] { color: red; }

    3. <div>Lorem ipsum dolor sit amet</div>

    Селекторы атрибутов | Учебные курсы

    Многие элементы HTML различаются по своему действию в зависимости от того, какие в них задействованы атрибуты. Например, <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление стиля к селектору input поменяет оформление одновременно у всех элементов <input>. Селекторы атрибутов позволяют выбрать нужные элементы и установить для них стиль по наличию определённого атрибута или его значения.

    Рассмотрим несколько наиболее популярных вариантов применения селекторов атрибутов.

    Селектор [attribute]

    Устанавливает стиль для элементов, у которых присутствует указанный атрибут. Значение атрибута при этом не учитывается. В качестве селектора используются квадратные скобки, внутри которых пишется произвольный атрибут.

    [title] { border-bottom: 1px dotted blue; }

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

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

    a[target] { font-weight: bold; }

    В данном случае выбираются только элементы <a>, к которым добавлен атрибут target с произвольным значением.

    В примере 1 показано изменение стиля элемента <textarea>, когда к нему добавляется атрибут readonly.

    Пример 1. Вид элемента в зависимости от его атрибута

    <!DOCTYPE html> <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>

    В данном примере селектор textarea устанавливает стиль для всех элементов <textarea>, а селектор textarea[readonly] для элементов <textarea>, к которым добавлен атрибут readonly. Результат примера показан на рис. 1.

    Рис.

    1. Изменение стиля элемента в зависимости от наличия атрибута readonly

    Учтите, что атрибут у элемента должен присутствовать явно. К примеру, для <input> атрибут type по умолчанию равен text, но селектор input[type] будет работать для <input type=»text»> и не будет для <input>, хотя сами элементы отображаются одинаково.

    Селектор [attribute=»value»]

    Устанавливает стиль для элемента, когда задано указанное значение атрибута. Например, для <input>, у которого значение type равно checkbox, селектор запишется следующим образом.

    input[type="checkbox"] { width: 20px; height: 20px; }

    Писать кавычки при этом не обязательно, но только если значение содержит латинские буквы и без пробелов. Так что input[type=checkbox] тоже работает.

    Значения чувствительны к регистру, поэтому в CSS пишите их так же, как они написаны в HTML.

    В примере 2 показано как установить стиль для элемента <input>, основываясь на его значении. =»http://»] { font-weight: bold; /* Жирное начертание */ } </style> </head> <body> <p><a href=»page/new.html»>Обычная ссылка</a> | <a href=»http://ya.ru»>Ссылка на ya.ru</a> | <a href=»http://google.ru»>Ссылка на google.ru</a></p> </body> </html>

    Результат данного примера показан на рис. 3.

    Рис. 3. Изменение стиля ссылок

    Селектор [attribute*=»value»]

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

    [class*="view"] { color: red; }

    При этом цвет изменится для элементов с классом view, view-block, viewer, overview или block-view.

    В примере 4 показано изменение стиля ссылок, в атрибуте href которых встречается слово «github». Для таких ссылок мы добавляем иконку, показывающую принадлежность к GitHub.

    Пример 4. Стиль для сайта GitHub

    <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Селекторы атрибутов</title> <style> a[href*=»github»] { /* Ссылка содержит github */ background: url(/example/image/if_GitHub.png) no-repeat 100% 50%; /* Добавляем фоновый рисунок */ padding-right: 24px; /* Смещаем текст влево */ } </style> </head> <body> <p><a href=»https://ya.ru»>Яндекс</a> | <a href=»https://github.com»>GitHub</a></p> </body> </html>

    Результат данного примера показан на рис. 4.

    Рис. 4. Изменение стиля ссылки

    Селектор [attribute$=»value»]

    Устанавливает стиль для элемента, когда значение атрибута оканчивается указанным текстом. К примеру, для выбора всех элементов, у которых класс завершается view, используется следующая запись.

    [class$="view"] { color: red; }

    При этом цвет изменится для элементов с классом view, block-view, overview, но не view-block или viewer.

    Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 5.

    Пример 5. Стиль для разных доменов

    <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Селекторы атрибутов</title> <style> a[href$=».ru»] { /* Ссылка оканчивается на .ru */ background: url(/example/image/ru.png) no-repeat 0 50%; /* Добавляем фоновый рисунок */ padding-left: 18px; /* Смещаем текст вправо */ } a[href$=».com»] { /* Ссылка оканчивается на .com */ background: url(/example/image/com.png) no-repeat 0 50%; padding-left: 18px; } </style> </head> <body> <p><a href=»//ya.ru»>Яндекс</a> | <a href=»//google. com»>Google</a></p> </body> </html>

    В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 5). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена косую черту (//ya.ru/) или адрес страницы (//ya.ru/search), мы изменим тем самым окончание и стиль применяться уже не будет.

    Рис. 5. Добавление картинки к ссылкам

    Селекторы атрибутов допустимо комбинировать между собой, чтобы выбрать элементы, содержащие два и более атрибута. К примеру, для элемента <input>, у которого есть атрибут type со значением password и атрибут required, запись будет следующей.

    input[type="password"][required] { border: 1px solid red; }

    Пробелы между селекторами атрибутов не ставятся, всё пишется в одну строку.

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

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

    
<h3 rel="friend">David Walsh</h3>

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

    
h3[rel=friend] {
	/* woohoo! */
}

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

    [rel=external]

    Атрибут точно соответствует заданному значению

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

    
<h2 rel="external">Attribute Equals</h2>
    
h2[rel=external] { color: red; }

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

    
<a href="http://perishablepress.com">Jeff Starr</a>
<a href="http://davidwalsh.name">David Walsh</a>
<a href="http://accidentalninja.net/">Richard Felix</a>

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

    
a[href=http://perishablepress.com] { color: red; }

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

    
input[type=text] { padding: 3px; }
input[type=radio] { float: left; }

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

    [rel*=external]

    Атрибут содержит заданное значение.

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

    
<h2 rel="xxxexternalxxx">Attribute Contains</h2>
    
h2[rel*=external] { color: red; }

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

    
<div></div>
<div></div>
<div></div>

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

    
div[id*=post]  { color: red; }
    [rel^=external]

    Атрибут начинается с заданного значения
    
<h2 rel="external-link yep">Attribute Begins</h2>
    
h2[rel^=external] { color: red; }

    Пример из жизни может быть такой: скажем вам необходимо подсветить ссылки на дружественный вам сайт отличным от остальных ссылок цветом. =http://perishablepress.com] { color: red; }

    [rel$=external]

    Атрибут заканчивается на заданное значение

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

    
<h2 rel="friend external">Attribute Ends</h2>
    
h2[rel$=external] { color: red; }

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

    
a[href$=#], a[href$=?] { color: red; }
    [rel~=external]

    Атрибут находится в списке, разделённом пробелами

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

    
<h2 rel="friend external sandwich">Attribute Space Separated</h2>
    
h2[rel~=external] { color: red; }

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

    [rel|=external]

    Атрибут находится в списке, разделённом дефисами

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

    
<h2 rel="friend-external-sandwich">Attribute Dash Separated</h2>
    
h2[rel|=external] { color: red; }
    [title=one][rel^=external]

    Соответствие по нескольким атрибутам

    Очень важно, что для выборки элементов есть возможность использовать сразу несколько селекторов по атрибутам. =Important] { color: red; }

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

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

    селекторов атрибутов — CSS: Каскадные таблицы стилей

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

     /* Элементы  с атрибутом title */
Заголовок] {
  цвет: фиолетовый;
}
/* Элементы  с атрибутом href, соответствующим "https://example.org" */
[href="https://example.org"]
{
  цвет: зеленый;
}
/* Элементы  с атрибутом href, содержащим «пример» */
а[href*="пример"] {
  размер шрифта: 2em;
}
/* Элементы  с href, оканчивающимся на ".org" */
а[href$=".org"] {
  стиль шрифта: курсив;
}
/* Элементы , атрибут класса которых содержит слово "логотип" */
а[класс~="логотип"] {
  отступ: 2px;
}
    [атрибут]

    Представляет элементы с именем атрибута attr .

    [атрибут=значение]

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

    [атрибут~=значение]

    Представляет элементы с именем атрибута attr , значение которого представляет собой список слов, разделенных пробелами, одно из которых ровно 9=значение]

    Представляет элементы с именем атрибута attr , значение которого имеет префикс (предшествует) значение .

    [атр$=значение]

    Представляет элементы с именем атрибута attr , значение которого имеет суффикс (за которым следует) значение .

    [атрибут*=значение]

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

    [значение оператора атрибута i]

    Добавление i (или I ) перед закрывающей скобкой приводит к тому, что значение будет сравниваться без учета регистра (для символов в диапазоне ASCII).

    [значение оператора attr s] Экспериментальный

    Добавление с 9="https"][href$=".org"] { цвет: зеленый; }

    HTML
    Результат

    Языки

    CSS 
     /* Все элементы div с атрибутом `lang` выделены жирным шрифтом.  */
раздел [язык] {
  вес шрифта: полужирный;
}
/* Все элементы div без атрибута lang выделены курсивом. */
div: не ([язык]) {
  стиль шрифта: курсив;
}
/* Все разделы в американском английском выделены синим цветом. */
div[lang~="en-us"] {
  цвет синий;
}
/* Все разделы на португальском языке зеленые. */
div[lang="pt"] {
  цвет: зеленый;
}
/* Все div в китайском языке красные, независимо от того,
   упрощенный (ж-КН) или традиционный (ж-ТВ). */
div[язык|="ж"] {
  красный цвет;
}
/* Все разделы с традиционным китайским языком
   `data-lang` окрашены в фиолетовый цвет. */
/* Примечание. Вы также можете использовать атрибуты с дефисом
   без двойных кавычек */
div[data-lang="zh-TW"] {
  цвет: фиолетовый;
}
    HTML 
     
    Привет, мир!
    

    Ола Мундо!
    

    世界您好！
    

    世界您好！
    

    世界您好！
    Результат

    Упорядоченные списки HTML

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

    CSS 
     /* Чувствительность к регистру зависит от языка документа */
ол[тип="а"] {
  тип стиля списка: нижняя альфа;
  фон: красный;
}
ол[тип="b" с] {
  тип стиля списка: нижняя альфа;
  фон: лайм;
}
ол[тип="B" с] {
  тип стиля списка: верхняя альфа;
  фон: серый;
}
ол [тип = "с" я] {
  тип стиля списка: верхняя альфа;
  фон: зеленый;
}
    HTML 
     
      
  
    1. 
    Красный фон для сопоставления без учета регистра (по умолчанию для селектора типа)
  
      2. 

    

      
  
    1. Лаймовый фон, если поддерживается модификатор `s` (с учетом регистра)
      2. 

    

      
  
    1. Серый фон, если поддерживается модификатор `s` (с учетом регистра)
      2. 

    
<ол тип="С">
  
  • 
    Зеленый фон, если поддерживается модификатор `i` (соответствие без учета регистра)
  
    •
    Результат
    # атрибут 9019 # атрибут 9019 # атрибут 9019 # атрибут 9019 # 901999999999. Включите JavaScript для просмотра данных.
    • атрибут()
    • Выбор одного элемента: Document.querySelector() , DocumentFragment.querySelector() или Element.querySelector()
    • Выбор всех соответствующих элементов: Document.querySelectorAll() , DocumentFragment.querySelectorAll() или Element.querySelectorAll()

    Последнее изменение: , участниками MDN

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

    ❮ Предыдущая Далее ❯

    Стиль HTML-элементов с определенными атрибутами

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

    Селектор CSS [атрибут]

    Селектор [атрибут] используется для выбора элементов с указанным атрибут.

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

    Пример

    a[target] {
      background-color: yellow;
    }

    Попробуйте сами »

    Селектор CSS [attribute="value"]

    Селектор [attribute="value"] используется для выбора элементов с указанным атрибут и значение.

    В следующем примере выбираются все элементы с атрибутом target="_blank":

    Пример

    a[target="_blank"] {
      background-color: yellow;
    }

    Попробуйте сами »

    Селектор CSS [attribute~="value"]

    Селектор [attribute~="value"] используется для выбора элементов с атрибутом значение, содержащее заданное слово.

    В следующем примере выбираются все элементы с атрибутом title, содержит список слов, разделенных пробелами, одно из которых — «цветок»:

    Пример

    [title~="flower"] {
     граница: 5 пикселей, сплошная желтая;
    }

    Попробуйте сами »

    В приведенном выше примере будут сопоставляться элементы с title="flower", title="summer цветок" и title="цветок новый", но не title="мой-цветок" или title="цветы".

    CSS [атрибут|="значение"] Селектор

    [атрибут|=" значение"] селектор используется для выбора элементов с указанным атрибутом, значение которого может быть точно указанное значение или указанное значение, за которым следует дефис (-). 9="top"] {
      фон: желтый;
    }

    Попробуйте сами »

    Селектор CSS [attribute$="value"]

    Селектор [attribute$="value"] используется для выбора элементов, атрибут которых value заканчивается указанным значением.

    В следующем примере выбираются все элементы со значением атрибута класса, заканчивается на "test":

    Примечание: Значение не обязательно должно быть целым словом!

    Пример

    [класс$="тест"] {
      фон: желтый;
    }

    Попробуйте сами »

    Селектор CSS [attribute*="value"]

    Селектор [attribute*="value"] используется для выбора элементов, атрибут которых value содержит указанное значение.

    В следующем примере выбираются все элементы со значением атрибута класса, содержит "te":

    Примечание: Значение не обязательно должно быть целым словом!

    Пример

    [class*="te"] {
     фон: желтый;
    }

    Попробуйте сами »

    Стилизация форм

    Селекторы атрибутов могут быть полезны для стилизации форм без класса или идентификатора:

    Пример

    ввод[тип="текст"] {
      ширина: 150 пикселей;
    дисплей: блок;
    нижняя граница: 10px;
    цвет фона: желтый;
    }

    ввод[тип="кнопка"] {
      ширина: 120 пикселей;
      левое поле: 35 пикселей;
      отображение: блок;
    }

    Попробуйте сами »

    Совет: Посетите наш учебник по формам CSS, чтобы узнать больше о том, как стилизовать формы с помощью CSS.

    Проверьте себя с помощью упражнений

    Упражнение:

    Установите цвет фона на «красный» для элементов , имеющих атрибут target .

    <стиль>
 {
  цвет фона: красный;
}

<тело>
  w3schools.com
  Disney.com
  wikipedia.org

    Начать упражнение

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

    Спецификация
    Selectors Level 4
    # атрибут
    Селектор Пример Пример описания
    [ атрибут ] [цель] Выбирает все элементы с целевым атрибутом
    [ атрибут = значение ] [цель=_пусто] Выбирает все элементы с target="_blank" 9="https"] Выбирает каждый элемент , значение атрибута href которого начинается с "https"
    [ атрибут $ = значение ] а[href$=". pdf"] Выбирает каждый элемент , значение атрибута href которого заканчивается на ".pdf"
    [ атрибут *= значение ] а[href*="w3schools"] Выбирает каждый элемент , значение атрибута href которого содержит подстроку "w3schools"

    ❮ Предыдущий Далее ❯


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

    Существует множество способов стилизации HTML-элементов. Одним из таких простых и мощных подходов является использование селекторов атрибутов CSS. Эти селекторы позволяют вам стилизовать элементы, имеющие некоторые атрибуты или значения атрибутов. Эти селекторы следующие.

    1. [атрибут] Селектор
    2. [атрибут="значение"] Селектор
    3. [атрибут~="значение"] Селектор 9= «значение»] Селектор
    4. [атрибут$= «значение»] Селектор
    5. [атрибут*= «значение»] Селектор

    Каждый из них подробно описан ниже.

    Селектор [атрибут]

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

    Синтаксис

    элемент [атрибут] {

    свойство: значение;

    }

    Или,

    [атрибут] {

    свойство: значение;

    }

    Пример

    Допустим, вы хотите задать стиль всем элементам с атрибутом alt , затем используйте селектор [атрибут] следующим образом.

    HTML

    Это заголовок

    Это абзац.

    В приведенном выше коде мы создали два элемента < h2> и

    . Элементу

    присвоен класс атрибута, а элементу

    — атрибут alt.

    CSS

    [альт] {

    стиль шрифта: курсив;

    }

    Теперь, используя селектор [attribute], мы стилизуем только те элементы с атрибутом alt. В этом случае, поскольку только элемент

    имеет атрибут alt, правило стиля будет применяться только к абзацу.

    Вывод

    Элементы с атрибутом alt были стилизованы.

    [атрибут="значение"] Селектор

    Атрибуты имеют некоторое значение, поэтому, чтобы стилизовать элемент, имеющий определенный атрибут и значение, мы используем селектор [attribute="value"].

    Синтаксис

    элемент [атрибут="значение"] {

    свойство: значение;

    }

    Или,

    [атрибут = "значение"] {

    свойство: значение;

    }

    Пример

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

    HTML



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

    CSS

    [класс = "ввод"] {

    цвет фона: розовый;

    размер шрифта: 20 пикселей;

    }

    [класс = "btn"] {

    заполнение: 3px;

    граница: сплошной черный 1 пиксель;

    }

    В приведенном выше коде мы используем селектор [attribute="value"] для стилизации как поля ввода, так и кнопки.

    Выход

    Оба элемента были успешно стилизованы.

    [атрибут~="значение"] Селектор

    Существуют определенные атрибуты, которые имеют список значений, разделенных пробелом, например, class="hello world". Теперь для стилизации элементов с такими значениями атрибутов используется селектор [attribute~=“value”]. Он стилизует элементы, значение атрибута которых соответствует одному из этих значений.

    Синтаксис

    элемент [атрибут~="значение"] {

    свойство: значение;

    }

    Или,

    [атрибут~="значение"] {

    свойство: значение;

    }

    Пример

    Пример ниже демонстрирует работу рассматриваемого селектора.

    HTML

    Это заголовок

    Это абзац.

    Это еще один абзац.

    В приведенном выше коде мы определили три элемента. Каждый из этих элементов имеет один и тот же атрибут, но разные значения.

    CSS

    [класс~="голова"] {

    цвет: фиолетовый;

    }

    [класс~="пара"] {

    размер шрифта: 20px;

    стиль шрифта: курсив;

    }

    С помощью селектора [атрибут~=“значение”] мы стилизуем заголовок и абзацы. Как видите, значение атрибута каждого элемента

    представляет собой список значений, разделенных пробелом, однако ключевое слово «para» присутствует в обоих значениях, поэтому правила стиля, определенные для значения атрибута «para», будут применяться к обоим абзацам.

    Вывод

    Селектор [атрибут~=«значение»] работает правильно.

    [атрибут |="значение"] Селектор

    Для стилизации элементов с атрибутами, значения которых разделены дефисом, используется селектор [атрибут |="значение"].

    Синтаксис

    элемент [атрибут|="значение"] {

    свойство: значение;

    }

    Или,

    [атрибут |="значение"] {

    свойство: значение;

    }

    Пример

    Следуйте приведенному ниже примеру, чтобы понять работу селектора [атрибут |=«значение»].

    HTML

    Это заголовок

    Это абзац.

    Это является другим абзацем.

    Значение атрибута

    и первого элемента

    разделено дефисом, однако значение атрибута последнего элемента

    не разделено дефисом.

    CSS

    [класс |="linux"] {

    background-color: bisque;

    стиль шрифта: курсив;

    }

    Теперь этот селектор будет применять правила стиля только к заголовку и первому абзацу, поскольку только эти два элемента имеют значение атрибута, разделенное дефисом. = «значение»] Селектор 9= «значение»] работает правильно.

    [attribute$= «значение»] Селектор

    Чтобы стилизовать элементы с атрибутами, имеющими определенное конечное значение, селектор [атрибут$=«значение»]. Значение не обязательно представляет собой целое слово.

    Синтаксис

    элемент [атрибут $="значение"] {

    свойство: значение;

    }

    Или,

    [атрибут $="value"] {

    свойство: значение;

    }

    Пример

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

    HTML

    Некоторый текст.

    Некоторый текст.

    Некоторый текст.

    Здесь мы создали три элемента div . Первым двум элементам div присвоено значение атрибута, заканчивающееся ключевым словом «div».

    CSS

    [класс $="div"] {

    цвет фона: бежевый;

    отступ: 10 пикселей;

    размер шрифта: 20 пикселей;

    стиль шрифта: курсив;

    }

    [атрибут $="значение"] применит приведенные выше правила стиля только к первым двум элементам div.

    Вывод

    Первые два элемента div были оформлены с помощью селектора [attribute $="value].

    [атрибут*= «значение»] Селектор

    Для стилизации всех элементов со значениями атрибутов, имеющими определенное ключевое слово, используется селектор [атрибут *= «значение»].

    Синтаксис

    элемент [атрибут *="значение"] {

    свойство: значение;

    }

    Или,

    [атрибут *="значение"] {

    свойство: значение;

    }

    Пример

    Предположим, вы хотите задать стиль некоторым элементам с помощью селектора [attribute*="value"]. Следуйте приведенному ниже коду.

    HTML

    Это абзац.

    Это еще один абзац.