Css селекторы атрибутов: Селекторы атрибутов

Содержание

Селекторы атрибутов | 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. Необходимо задать цвет фона у текстового поля. Какой стиль для этой цели подойдет?

INPUT[type=»text»] { background: #acdacc; }
INPUT[type=»textinput»] { background: #acdacc; }
INPUT[type=»textfield»] { background: #acdacc; }
INPUT[type=»textarea»] { background: #acdacc; }
INPUT[type=»texts»] { background: #acdacc; }

2. Какой стиль необходимо использовать, чтобы изменить цвет текста только у второго абзаца?

<p>Первый абзац</p>
<p>Второй абзац</p>
<p>Третий абзац</p>

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

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

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

<p>Lorem ipsum dolor sit amet</p>
<div>Lorem ipsum dolor sit amet</div>
<p>Lorem ipsum dolor sit amet</p>
<div>Lorem ipsum dolor sit amet</div>
<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>

Селекторы атрибутов — Веб-технологии для разработчиков

Обзор

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

[attr]: Обозначает элемент с атрибутом по имени attr.
[attr=value]: Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.
[attr~=value]: Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value
[attr|=value]: Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно «value» или может начинаться с «value» со сразу же следующим «-» (U+002D). Это может быть использовано когда язык описывается с подкодом.
[attr^=value]: Обозначает элемент с именем атрибута attr значение которого начинается с «value»
[attr$=value]: Обозначает элемент с именем атрибута attr чье значение заканчивается на «value»
[attr*=value]: Обозначает элемент с именем атрибута attr чье значение содержит по крайней мере одно вхождение строки «value» как подстроки.

Пример

/* Все span с атрибутом "lang" будут жирными */
span[lang] {font-weight:bold;}
 
/* Все span в Португалии будут зелеными */
span[lang="pt"] {color:green;}

/* Все span с американским английским будут синими */
span[lang~="en-us"] {color: blue;}

/* Любые span на китайском языке будут красными, как на упрощенном китайском (zh-CN) так и на традиционном (zh-TW) */
span[lang|="zh"] {color: red;}

/* Все внутренние ссылки будут иметь золотой фон */
a[href^="#"] {background-color:gold}

/* Все ссылки с url заканчивающимся на .cn будут красными */
a[href$=".cn"] {color: red;}

/* Все ссылки содержащие "example" в url будут иметь серый фон */
a[href*="example"] {background-color: #CCCCCC;}

<div>
    <a href="http://example.com">English:</a>
    <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div>
    <a href="#portuguese">Portuguese:</a>
    <span lang="pt">Olá Mundo!</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Simplified):</a>
    <span lang="zh-CN">世界您好！</span>
</div>
<div>
    <a href="http://example.cn">Chinese (Traditional):</a>
    <span lang="zh-TW">世界您好！</span>
</div>

Спецификации

Совместимость с браузерами

Функциональность	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Базовая поддержка	(Да)	1.0 (1.7 или ранее)	7	9	3

Функциональность	Android	Chrome for Android	Firefox Mobile (Gecko)	IE Mobile	Opera Mobile	Safari Mobile
Базовая поддержка	?	?	1.0 (1)	?	?	?

См. также

Селекторы по атрибутам в 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; }

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


a[href^=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]
Соответствие по нескольким атрибутам

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


<h2 rel="handsome" title="Important note">Multiple Attributes</h2>


h2[rel=handsome][title^=Important] { color: red; }

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

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

Тонкости использования селекторов аттрибутов в CSS / ХабрCSS может связываться с HTML элементами используя любые из его атрибутов. Вы наверняка знаете о классах и ID. Проверим это в HTML:

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

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

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

Существует множество селекторов атрибутов, мы не будем рассматривать все возможные варианты, рассмотрим наиболее полезные сценарии, встречающиеся в реальном мире.
В примере выше, мы использовали атрибут со значением «friend» у элемента h3. CSS селектор, который мы написали, нацелен на элемент h3, потому что его атрибут rel имеет значение «friend». Другими словами, знак равенства означает точное соответствие. Рассмотрим другие примеры.

<h2 rel="external">Attribute Equals</h2>

h2[rel=external] { color: red; }

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

<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, button, checkbox, file, hidden, image, password, radio, reset и submit. Все они являются элементом <input/> и все они очень разные. Так что делать, что то вроди input {padding: 10px;}, почти всегда плохая идея. Поэтому очень часто можно увидеть, нечто похожее на это:

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

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

<h2 rel="xxxexternalxxx">Attribute Contains</h2>

h2[rel*=external] { color: red; }

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

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

Вы можете выбрать их все:

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

<h2 rel="external-link yep">Attribute Begins</h2>

h2[rel^=external] { color: red; }

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

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

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

<h2 rel="friend external">Attribute Ends</h2>

h2[rel$=external] { color: red; }

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

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

Вы наверняка знаете, что к элементу можно применять несколько классов. Если вы это сделаете, вы можете использовать .class-name в CSS для связи. В селекторе атрибута не все так просто. Если ваш атрибут имеет несколько значений (например список разделенный пробелами) вам прийдется использовать «~=».

<h2 rel="friend external sandwich">Attribute Space Separated</h2>

h2[rel~=external] { color: red; }

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

<h2 rel="friend-external-sandwich">Attribute Dash Separated</h2>

h2[rel|=external] { color: red; }

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

<h2 rel="handsome" title="Important note">Multiple Attributes</h2>

h2[rel=handsome][title^=Important] { color: red; }

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

Каждый приведенный выше пример работает во всех современных браузерах: Safari, Chrome, Firefox, Opera и IE. Internet Explorer обладает превосходной поддержкой всего этого в 7 версии и нулевой поддержкой в 6 версии. Что бы протестировать в браузере — откройте тестовую страницу. Если строка/селектор красная — значит селектор работает.

СSS Атрибуты Селекторов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Примечание: Значение должно быть целым словом, либо в одиночным, как class="top", или через дефис -, как class="top-text"!

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

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

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

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

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

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

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

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

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

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

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

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

Стиль формы

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

Пример

input[type=»text»] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type=»button»] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

Редактор кода »

Совет: Посетите наш CSS Учебник Форм дополнительные примеры стиля форм с помощью CSS.

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

Еще CSS примеры селекторов

Используйте наш CSS Тестер Селекторов демонстрация различных селекторов.

Полный справочник селекторов CSS, пожалуйста, перейдите на наш CSS Справочник Селекторов.

Селекторы атрибутов CSS. Описание и примеры — учебник CSS

С помощью CSS селекторов атрибутов (англ. attribute selectors) вы можете задавать стиль тем тегам, которые имеют указанные атрибуты. Пример: вы желаете присвоить определенный стиль всем фотографиям, которые имеют атрибут title, не затрагивая все остальные изображения. Делается это просто:


img[title] {
	width: auto;
	height: auto;
}

Как видим, атрибут title записан в квадратных скобках после названия img, затем идет блок объявлений. А что если вам понадобится создать стиль только для тех изображений с атрибутом title, которым присвоен определенный класс, скажем, .gallery? В таком случае это записывается так:


.gallery[title] {
	width: auto;
	height: auto;
}

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

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


img[title="portrait"] {
	border-style: solid;
}

Выборка по началу текста

Селекторы атрибутов также могут пригодиться при оформлении ссылок. Представьте, что вам нужно особым образом выделить все адреса URL с протоколом https://. Для этого достаточно описать, как выглядит начало адреса URL:


a[href^="https://"] {
	color: green;
}

Обратите внимание на символ ^, который в переводе на наш язык означает «начинается с». Используя его, вы можете придавать свой стиль различным ссылкам (и не только им). Например, чтобы изменить цвет всех ссылок, которые ведут на главную или другие страницы https://google.com, нужно записать:


a[href^="https://google.com"] {
	color: green;
}

Обратите внимание на то, что наш стиль будет применен строго к тем ссылкам, которые начинаются так https://google.com. Другие варианты написания ссылок, например, https://www.google.com или http://google.com, необходимо записывать отдельно. Пример:


a[href^="https://google.com"] {
	color: green;
}

a[href^="https://www.google.com"] {
	color: green;
}


/* Или более короткий способ: */

a[href^="https://google.com"], [href^="https://www.google.com"] {
	color: green;
}

Выборка по концу текста

А может быть вы желаете красиво оформить все ссылки на файлы с расширением .rar? Тогда вам понадобится описать, как выглядит окончание URL:


a[href$=".rar"] {
	color: #FFF;
	text-decoration: none;
	background-color: orange;
	padding: 5px 10px;
	cursor: pointer;
}

Не забудьте указать после названия атрибута символ $, который означает «заканчивается на».

Итоги

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

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

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

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

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

Internet Explorer	Chrome	Opera	Safari	Firefox	Android	iOS
7.0+	1.0+	3.5+	1.0+	1.0+	1.0+	1.0+

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

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

Синтаксис

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

Пример

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>

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

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

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

CSS атрибутов выбора

HTML-элементы стиля

с конкретными атрибутами

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

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

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

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

вход [type = «button»] {
ширина: 120 пикселей;
поле слева: 35 пикселей;
дисплей: блок;
}

Попробуй сам »

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

Проверь себя упражнениями!

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

Селектор	Пример	Пример описания
[ атрибут ]	[цель]	Выбирает все элементы с целевым атрибутом
[ атрибут = значение ]	[target = _blank]	Выбирает все элементы с target = «_ blank»
[ атрибут ~ = значение ]	[title ~ = flower]	Выбирает все элементы с атрибутом заголовка, содержащим слово «цветок»
[ атрибут \| = значение ]	[lang \| = en]	Выбирает все элементы со значением атрибута lang, начинающимся с «en».
[ атрибут ^ = значение ]	a [href ^ = «https»]	Выбирает каждый элемент , значение атрибута href которого начинается с «https»
[ атрибут $ = значение ]	a [href $ = «.pdf «]	Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf»
[ атрибут * = значение ]	a [href * = «w3schools»]	Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools»

Селекторов атрибутов — Изучите веб-разработку

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

Селекторы присутствия и значения

Эти селекторы позволяют выбирать элемент на основе наличия только одного атрибута (например, href ) или различных совпадений со значением атрибута.

Селектор	Пример	Описание
`[ attr ]`	`а [название]`	Сопоставляет элементы с атрибутом attr (имя которого является значением в квадратных скобках).
`[ attr = значение ]`	`a [href = "https://example.com"]`	Сопоставляет элементы с атрибутом attr , значение которого точно равно значению — строка внутри кавычек.
`[ attr ~ = значение ]`	`р [класс ~ = "специальные"]`	Сопоставляет элементы с атрибутом attr , значение которого точно равно значению , или содержит значение в своем (разделенном пробелами) списке значений.
`[ attr \| = value ]`	`div [lang \| = "zh"]`	Сопоставляет элементы с атрибутом attr , значение которого точно равно значению или начинается со значения , за которым сразу следует дефис.

В приведенном ниже примере вы можете увидеть использование этих селекторов.

Используя li [class] , мы можем сопоставить любой селектор с атрибутом класса. Это соответствует всем элементам списка, кроме первого.
li [class = "a"] соответствует селектору с классом и , но не селектору с классом и с другим разделенным пробелами классом как частью значения. Он выбирает второй элемент списка.
li [class ~ = "a"] будет соответствовать классу a , но также и значению, которое содержит класс a как часть списка, разделенного пробелами. Он выбирает второй и третий элементы списка.

селекторов соответствия подстроки

Эти селекторы позволяют более тщательно сопоставлять подстроки внутри значения вашего атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите сопоставить все, что начинается со строки «box-«, вы можете использовать [class ^ = "box-"] для выбора они оба (или [class | = "box"] , как описано в разделе выше).= «box-«] Сопоставляет элементы с атрибутом attr (имя которого является значением в квадратных скобках), значение которого начинается со значения . [ attr $ = значение ] li [class $ = "- box"] Сопоставляет элементы с атрибутом attr , значение которого заканчивается значением . [ attr * = значение ] li [class * = "box"] Сопоставляет элементы с атрибутом attr , значение которого содержит значение в любом месте строки.= «a»] соответствует любому значению атрибута, которое начинается с a , поэтому соответствует первым двум элементам списка.

li [class $ = "a"] соответствует любому значению атрибута, которое заканчивается a , поэтому соответствует первому и третьему элементу списка.

li [class * = "a"] соответствует любому значению атрибута, где a появляется в любом месте строки, поэтому оно соответствует всем элементам нашего списка.

Чувствительность к регистру

Если вы хотите сопоставить значения атрибута без учета регистра, вы можете использовать значение i перед закрывающей скобкой.Этот флаг сообщает браузеру, что символы ASCII должны совпадать без учета регистра. Без флага значения будут сопоставлены в соответствии с регистром языка документа — в случае HTML он будет чувствительным к регистру.

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

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

Следующие шаги

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

В этом модуле

Каскад и наследство
CSS селекторов
Коробка модель
Фоны и границы
Обработка различных текстовых направлений
Переполнение содержимого
Значения и единицы
Определение размеров в CSS
Изображения, мультимедиа и элементы формы
Столы для укладки
Отладка CSS
Организация вашего CSS

CSS | Выбор атрибутов — GeeksforGeeks

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

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

Пример:

< HTML >

< голова >

< title > Селектор атрибутов title >

< стиль >

[класс] {

выравнивание текста: по центру;

Цвет: зеленый;

}

.GFG {

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

Вес шрифта: жирный;

margin-bottom: -20px;

}

стиль >

голова >

< кузов >

< div class = "gfg" > GeeksforGeeks div >

< р класс = "гики" > Портал компьютерных наук для гиков р >

кузов >

HTML >

Выход:

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

< HTML >

< голова >

< title > Селектор атрибутов title >

< стиль >

div [style] {

выравнивание текста: по центру;

цвет: зеленый;

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

Вес шрифта: жирный;

margin-bottom: -20px;

}

р {

выравнивание текста: по центру;

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

}

стиль >

голова >

< кузов >

< div style = "color: green" > GeeksforGeeks div >

< p > Портал информатики для гиков p >

кузов >

HTML >

Выход:

Несколько элементов можно выбрать с помощью оператора запятой

 h3, p [style] {
    цвет фона: # 00b93e;
}

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

Пример:

< HTML >

< голова >

< title > Селектор атрибутов title >

< стиль >

[title = "gfg"] {

цвет: зеленый;

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

Вес шрифта: жирный;

выравнивание текста: по центру;

}

[title = "geeks"] {

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

выравнивание текста: по центру;

margin-top: 0px;

}

стиль >

голова >

< кузов >

< div title = "gfg" > GeeksforGeeks div >

< p title = "geeks" > Портал компьютерных наук для гиков p >

кузов >

  
    HTML  >

Выход:

[attribute ~ = ”value”] Селектор: Этот селектор используется для выбора всех элементов, значение атрибута которых представляет собой список значений, разделенных пробелами, один из которых точно равен указанному значению.

Пример:

< HTML >

< голова >

< title > Селектор атрибутов title >

< стиль

 > 
    [class ~ = "gfg"] {
    цвет: зеленый; 
    размер шрифта: 40px; 
    Вес шрифта: жирный; 
    выравнивание текста: по центру; 
   } 
    [class ~ = "geeks"] {
    размер шрифта: 17px; 
    выравнивание текста: по центру; 
    margin-top: 0px; 
   } 
      стиль  > 
      голова  > 
    <  кузов  > 
    <  div   class   =   "gfg"  > GeeksforGeeks   div  > 
    <  div   Класс   =   "гики"  > Портал компьютерных наук для гиков 
      div  > 
    <  div   class   =   "geeks ide"  > GeeksforGeeks является платформой кодирования 
      div  > 
      кузов  > 
    HTML  >

Выход:

[attribute | = ”value”] Селектор: Этот селектор используется для выбора всех элементов, атрибут которых имеет разделенный дефисом список значений, начинающийся с указанного значения.Значение должно быть целым словом, либо одним, либо последующим дефисом.

Пример:

< HTML >

< голова >

< title > Селектор атрибутов title >

< стиль >

[class | = "gfg"] {

цвет: зеленый;

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

Вес шрифта: жирный;

выравнивание текста: по центру;

}

[class | = "geeks"] {

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

выравнивание текста: по центру;

margin-top: 0px;

}

стиль >

голова >

< кузов >

< div class = "gfg" > GeeksforGeeks div >

< div Класс = "geeks-ide" > Портал компьютерных наук для гиков

div >

< div class = "geeks-ide1" > GeeksforGeeks является платформой кодирования

div >

кузов >

HTML >

Выход:

[attribute ^ = ”value”] Селектор: Этот селектор используется для выбора всех элементов, значение атрибута которых начинается с указанного значения.Значение не обязательно должно быть целым словом.

Пример:

< HTML >

< голова >

< title > Селектор атрибутов title >

< стиль >

[класс ^ = "gfg"] {

цвет: зеленый;

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

Вес шрифта: жирный;

выравнивание текста: по центру;

}

[класс ^ = "вундеркиндов"] {

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

выравнивание текста: по центру;

margin-top: 0px;

}

стиль >

голова >

< кузов >

< div class = "gfg" > GeeksforGeeks div >

< div Класс = "гики" > Портал компьютерных наук для гиков

div >

< div class = "geekside" > GeeksforGeeks является платформой кодирования

div >

кузов >

HTML >

Выход:

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

Пример:

< HTML >

< голова >

< title > Селектор атрибутов title >

< стиль >

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

цвет: зеленый;

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

Вес шрифта: жирный;

выравнивание текста: по центру;

}

[class $ = "geeks"] {

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

выравнивание текста: по центру;

margin-top: 0px;

}

стиль >

голова >

< кузов >

< div class = "gfg" > GeeksforGeeks div >

< div Класс = "geeksforgeeks" > Портал компьютерных наук для гиков

div >

< div класс = "гики" > GeeksforGeeks является платформой кодирования

div >

кузов >

HTML >

CSS селекторов - веб-технологии для разработчиков

Селекторы CSS определяют элементы, к которым применяется набор правил CSS.

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

Основные селекторы

Универсальный селектор: Выбирает все элементы. Необязательно, оно может быть ограничено конкретным пространством имен или всеми пространствами имен.
Синтаксис: * нс | * * | *
Пример: * будет соответствовать всем элементам документа.
Селектор типа: Выбирает все элементы с указанным именем узла.
Синтаксис: имя элемента
Пример: вход будет соответствовать любому элементу .
Селектор класса: Выбирает все элементы с указанным атрибутом class .
Синтаксис: . classname
Пример: .index будет соответствовать любому элементу, имеющему класс «index».
ID селектор: Выбирает элемент на основе значения его атрибута id . В документе должен быть только один элемент с указанным идентификатором.
Синтаксис: # idname
Пример: #toc будет соответствовать элементу с идентификатором «toc».
Селектор атрибутов: Выбирает все элементы, которые имеют данный атрибут.
Синтаксис: [ attr ] [ attr = значение ] [ attr ~ = значение ] [ attr | = значение ] [ attr ^ = значение ] [ attr $ = значение ] [ attr * = значение ]
Пример: [autoplay] будет соответствовать всем элементам, которые имеют autoplay набор атрибутов (к любому значению).

Группировка селекторов

Список выбора: , - это метод группировки, он выбирает все совпадающие узлы.
Синтаксис: A , B
Пример: div, span будет соответствовать элементам и
.

комбинаторы

Потомковый комбинатор

Комбинатор (пробел) выбирает узлы, которые являются потомками первого элемента.
Синтаксис: A B
Пример: div span будет соответствовать всем элементам, которые находятся внутри элемента

Детский комбинатор

Комбинатор > выбирает узлы, которые являются прямыми дочерними элементами первого элемента.
Синтаксис: A > B
Пример: ul> li будет соответствовать всем элементам

, которые вложены непосредственно в элемент

Общий братский комбинатор

Комбинатор ~ выбирает братьев и сестер. Это означает, что второй элемент следует за первым (хотя и не обязательно сразу), и оба имеют одного и того же родителя.
Синтаксис: A ~ B
Пример: p ~ span будет соответствовать всем элементам, которые следуют за

, сразу или нет.

соседний брат-комбинатор

Комбинатор + выбирает соседних братьев и сестер.Это означает, что второй элемент непосредственно следует за первым, и оба имеют одного и того же родителя.
Синтаксис: A + B
Пример: h3 + p будет соответствовать всем

элементам, которые непосредственно следуют за

.

Колонный комбинатор

|| Комбинатор выбирает узлы, которые принадлежат столбцу.
Синтаксис: A || B
Пример: цв. || td будет соответствовать всем элементам, которые относятся к области действия .

Псевдо

Псевдоклассы: Псевдо : позволяет выбирать элементы на основе информации о состоянии, которая не содержится в дереве документа.
Пример: a: посещенный будет соответствовать всем элементам, которые посетил пользователь.
Псевдоэлементы: Псевдо :: представляют объекты, которые не включены в HTML.
Пример: p :: first-line будет соответствовать первой строке всех
элементов.

Технические характеристики

Спецификация	Статус	Комментарий
Селектор Уровень 4	Рабочий проект	Добавлено `\|\| Комбинатор столбцов` , структурные селекторы сетки, логические комбинаторы, местоположение, временное измерение, состояние ресурса, псевдоклассы лингвистики и пользовательского интерфейса, модификатор для выбора значений атрибутов с учетом регистра и без учета регистра ASCII.
Селекторы Уровень 3	Рекомендация	Добавлены общий комбинатор `~` и древовидные псевдоклассы. Сделанные псевдоэлементы используют префикс двойной двоеточия `::` . Дополнительные атрибуты селекторов
CSS Уровень 2 (Редакция 1)	Рекомендация	Добавлены `>` дочерних и `+` соседних братских комбинаторов. Добавлены универсальные селекторы и атрибутов .
CSS Уровень 1	Рекомендация	Первоначальное определение.

См. Таблицы спецификаций псевдоклассов и псевдоэлементов для получения подробной информации о них.

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

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

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

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

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

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

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

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

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

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

Ответы

Обзор

Пример

Спецификации

Совместимость с браузерами

См. также

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

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

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

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

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

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

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

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

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

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

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

СSS Атрибуты Селекторов

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

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

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

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

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

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

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

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

Стиль формы

Пример

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

Еще CSS примеры селекторов

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

Выборка по началу текста

Выборка по концу текста

Итоги

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

Версии CSS

Описание

Синтаксис

CSS атрибутов выбора

с конкретными атрибутами

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

Проверь себя упражнениями!

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

Селекторов атрибутов — Изучите веб-разработку

Селекторы присутствия и значения

селекторов соответствия подстроки

Чувствительность к регистру

Следующие шаги

В этом модуле

CSS | Выбор атрибутов — GeeksforGeeks

CSS селекторов - веб-технологии для разработчиков

Основные селекторы

Группировка селекторов

комбинаторы

.

Псевдо

Добавить комментарий Отменить ответ

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

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

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

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

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

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

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

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

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

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

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

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

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

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