Css селектор атрибут значение описание правил стиля стили применяются: Селекторы атрибутов | htmlbook.ru

Содержание

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

    [атрибут$=»значение»] | htmlbook.ru

    Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
    7.0+1.0+3.5+1.0+1.0+1.0+1.0+

    Версии CSS

    Описание

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

    Синтаксис

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

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

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

    Пример

    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. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая
    картинка (рис. 1). Стилевые свойства будут добавляться только для тех ссылок, атрибут
    href которых оканчивается на «.ru» или «.com».
    Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес
    страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль
    применяться уже не будет.

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

    [атрибут|=»значение»] | htmlbook.ru

    Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
    7.0+1.0+3.5+1.0+1.0+1.0+1.0+

    Версии CSS

    Описание

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

    Синтаксис

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

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

    Пример

    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», поскольку значение начинается именно с этого слова и в значении встречаются дефисы.

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

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

    Замечание: селекторы атрибутов поддерживаются браузером Internet Explorer начиная с версии 7.0, причем для корректной работы примеров необходимо добавить правильный <!DOCTYPE>.

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

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

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

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

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

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

    Пример 12.1. Вид элемента в зависимости от его параметра

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   Q {
    font-style: italic; /* Курсивное начертание */
    quotes: "\00AB" "\00BB"; /* Меняем вид кавычек в цитате */
   }
   Q[title] {
    color: maroon; /* Цвет текста */
   }
  </style>
 </head>
 <body>
  <p>Продолжая известный закон Мерфи, который гласит: <q>Если неприятность 
  может случиться, то она обязательно случится</q>, можем ввести свое наблюдение: 
  <q title="Из законов Фергюсона-Мержевича">После 
  того, как веб-страница будет корректно отображаться в одном браузере, выяснится, 
  что она неправильно показывается в другом</q>.</p>
 </body>
</html>

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

    Селектор атрибута со значением

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

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

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

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

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

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[target="_blank"] { 
    background: url(blank.gif) no-repeat 0 2px; /* Параметры фонового рисунка */
    padding-left: 15px; /* Смещаем текст вправо */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> | 
     <a href="link2" target="_blank">Ссылка в новом окне</a></p>
 </body>
</html>

    Результат примера показан ниже (рис. 12.2).
    В данном примере рисунок к ссылке добавляется с помощью атрибута background. В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через аргумент no-repeat, что в итоге даст единственное изображение.=»значение»] { Описание правил стиля }

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

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

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

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href^="http://"] { 
    font-weight: bold; /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  <p><a href="link1.html">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank" rel="nofollow" >Внешняя ссылка на сайт htmlbook.ru</a></p>
 </body>
</html>

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

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

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

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

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

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

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

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   A[href$=".ru"] { /* Если ссылка заканчивается на .ru */ 
    background: url(ru.gif) no-repeat; /* Параметры фонового рисунка */
    padding-left: 10px; /* Смещаем текст вправо */ 
   }
   A[href$=".com"] { /* Если ссылка заканчивается на .com */ 
    background: url(com.gif) no-repeat;
    padding-left: 10px;
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.yandex.com" rel="nofollow" >Yandex.Com</a> | 
  <a href="http://www.yandex.ru" rel="nofollow" >Yandex.Ru</a></p>
 </body>
</html>

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

    Значение встречается в любом месте атрибута

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

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

    Значение может располагаться в любом месте аргумента, например, в начале, в конце или где-то посередине. Главное, что оно является его частью. Так, в примере 12.5 показано изменение стиля ссылок, в которых встречается слово «htmlbook».

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

    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Селекторы атрибутов</title>
  <style type="text/css">
   [href*="htmlbook"] { 
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/" rel="nofollow" >Теги HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru" rel="nofollow" >Шаг за шагом</a> | 
  <a href="http://webimg.ru" rel="nofollow" >Графика для Веб</a></p>
 </body>
</html>

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

    Ссылка на первоисточник: http://stepbystep.htmlbook.ru/?id=54

    Селекторы [АйТи бубен]

    Селекторы Основы работы с CSS, jQuery. Селекторами называют специальным образом записанные выражения, позволяющие применить правила форматирования некоторой группе элементов web-страницы:

    селектор {
   свойство: значение;
 }

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

    Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML — чувствительны к регистру.

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

    * { Описание правил стиля }
    <html>
 <head>
  <title>Универсальный селектор</title>
  <style type="text/css">
   * {
    color:black; / *Цвет текста по умолчанию */
    font-family: Aral, Verdana, sans-serif; /* Рубленый шрифт для текста */
    font-size: 96%; /* Размер текста */
   }
   </style>
</head>
 <body>
    * { margin: 0; padding: 0; }
    #main * { border: 2px solid black; }

    Одним из наиболее распространенных селекторов является селектор элемента или тип элемента:

    h2 {
    font-size: 14pt;
    color: #660000;
}										   
p {
    text-align: justify;
}

    В данном примере используется стиль для заголовков 1го уровня и абзацев документа. Как можно видеть в коде примера, абзацы не содержат выравнивания, однако их содержимое выравнивается по ширине, как то задает стиль для селектора p.

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

    Элемент.КЛАСС { Правила стиля ... }

    Используется класс стиля путем указания атрибута class с заданным значением у элементов заданного типа. К примеру, если класс и именем «с1» создан для абзаца (элемент «p»), то его нельзя использовать для форматирования, к примеру, заголовков.

    Листинг: Использование классов стиля

    p { /* стиль обычного абзаца */
    text-align: justify;
}				 
p.cite { /* создание класса альтернативного стиля абзаца */
    text-align: justify;
    font-style: italic;
    font-sise: 8pt;
    color: #999999;
}			   
 
...
<!-- использование класса -->
<p>Селекторами называют ... </p>

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

    .КЛАСС { Правила стиля ... }

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

    Что бы присвоить блоку несколько классов напишите их через пробел, например:

    <div>
Блок с 3-я классами</div>

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

    #идентификатор { правила форматирования }

    После этого любой элемент, имеющий заданный ID примет указанные свойства форматирования. Ограничение состоит в том, что в любом XHTML документе не должны повторятся значения атрибутов ID его элементов, то есть, должна соблюдаться уникальность идентификатора.

    Пример. Применение селектора ID

    /* селектор в CSS */
#copyright {
    txt-align: center;
    font-size: 10pt;
    font-weight: bold;
    color: #996633;
    border-top: 1px dashed black;
}          
 
<!-- Применение на странице -->
 
<p>
    &copy; 2012.
</p>

    Для оптимизации стилевых таблиц и сокращения набираемого кода часто можно использовать группирование селекторов, требующих применения одного и того же набора правил форматирования. Примером таких элементов могут служить элементы <b> и <strong> — оба они размечают текст полужирным шрифтом.

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

    b {
    color: #660000;
    text-decoration: underline;
}
strong {
    color: #660000;
    text-decoration: underline;
}

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

    b, strong {
    color: #660000;
    text-decoration: underline;
}

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

    Группирование селекторов можно применить и в таком контексте: допустим, необходимо задать заголовкам всех уровней одинаковые свойства font-family, text-align и color и сделать их отличающимися только размерами текста:

    /* Общие свойства */
h2, h3, h4, h5, h5, h6 {
    font-family: Tahoma;
    text-align: Center;
    color: navy;
}              
 
/* Индивидуальные свойства */
h2 { font-size: 18pt; }
h3 { font-size: 16pt; }
h4 { font-size: 14pt; }

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

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

    Псевдоклассы используются в CSS чтобы применять к элементам разные процедуры форматирования. Синтаксис использования псевдоклассов следующий:

    селектор:псевдокласс { property: value; }

    Существуют следующие псевдоклассы:

    1. active — Активная ссылка. Цвет ссылки меняется при нажатии на ней кнопки мыши.

    2. link — Непосещенная ссылка.

    3. hover — Ссылка при наведенном курсоре мыши.

    4. focus

    5. visited — Посещенная ссылка.

    6. first-letter — Определяет стиль для первого символа текстового блока.

    7. first-line — Устанавливает стиль для первой строки текстового блока.

    8. after

    9. before

    Первые 4 псевдокласса применяются исключительно к гиперссылкам и задают формат гиперссылки в зависимости от ее состояния. Последующие 2 — к любому текстовому блоку.

    Использование псевдоклассов для гиперссылок позволяет добиться довольно интересных эффектов. Таких, например, как создание ролловеров. Для этого можно задействовать стиль для класса элемента <a> и его псевдокласса hover:

    Листинг: Псевдоклассы гиперссылок

    /* Стилевые правила */
a.rollover {
    color: #660000;
    text-decoration: none;
}                         
a.rollover:hover {
    color: #FF0000;
    text-decoration: underline;
}                           
 
<!-- Применение в HTML -->
 
<a href="#">Ссылка-ролловер</a><br />
<a href="#">Обычная гиперссылка</a> <br />

    Листинг: Unicode символы как иконки

            <style>
            .icon-test:before { content: "♒ "; }
            .icon-test:after { content: " \2652"; }
        </style>
    </head>
    <body>
        <span>Aquarius</span><button>&#x2652; &#9810;</button>
    p:first-letter{
	font-size:5em;
	color:#d30;
}
p:first-line{
	font-size:2em;
	color:#69c;
}
 
p:before{
	content:"Начало параграфа ";
	font-size:3em;
	color:#f30;
}
p:after{
	content:" Окончание параграфа";
	font-size:3em;
	color:#69c;
}
a:after{
	content:" [" attr(href) "]";
}

    Селекторы служат для отбора элементов DOM. jQuery полностью совместима со спецификацией Основы работы с CSS3. jQuery не зависит от реализации CSS в браузере, если в нем нет корректной реализации селекторов CSS jQuery все равно будет отбирать элементы в соответствии с правилами W3C.

    jQuery позволяет объединять несколько селекторов в одно выражение.

    Селекторы и тег table.

    %PDF-1.4
    %
    2 0 obj
    >
    endobj
    3 0 obj
    >
    endobj
    4 0 obj
    >
    endobj
    5 0 obj
    >
    endobj
    6 0 obj
    >
    endobj
    7 0 obj
    >
    endobj
    8 0 obj
    >
    endobj
    9 0 obj
    >
    endobj
    10 0 obj
    >
    endobj
    11 0 obj
    >
    endobj
    12 0 obj
    >
    endobj
    13 0 obj
    >
    endobj
    14 0 obj
    >
    endobj
    15 0 obj
    >
    endobj
    16 0 obj
    >
    endobj
    17 0 obj
    >
    endobj
    18 0 obj
    >
    endobj
    19 0 obj
    >
    endobj
    20 0 obj
    >
    endobj
    21 0 obj
    >
    endobj
    22 0 obj
    >
    endobj
    23 0 obj
    >
    endobj
    24 0 obj
    >
    endobj
    25 0 obj
    >
    endobj
    26 0 obj
    >
    endobj
    27 0 obj
    >
    endobj
    28 0 obj
    >
    endobj
    29 0 obj
    >
    endobj
    30 0 obj
    >
    endobj
    31 0 obj
    >
    endobj
    32 0 obj
    >
    endobj
    33 0 obj
    >
    endobj
    34 0 obj
    >
    endobj
    35 0 obj
    >
    endobj
    36 0 obj
    >
    endobj
    37 0 obj
    >
    endobj
    38 0 obj
    >
    endobj
    39 0 obj
    >
    endobj
    40 0 obj
    >
    endobj
    41 0 obj
    >
    endobj
    42 0 obj
    >
    endobj
    43 0 obj
    >
    endobj
    44 0 obj
    >
    endobj
    45 0 obj
    >
    endobj
    46 0 obj
    >
    endobj
    47 0 obj
    >
    endobj
    48 0 obj
    >
    endobj
    49 0 obj
    >
    endobj
    50 0 obj
    >
    endobj
    51 0 obj
    >
    endobj
    52 0 obj
    >
    endobj
    53 0 obj
    >
    endobj
    54 0 obj
    >
    endobj
    55 0 obj
    >
    endobj
    56 0 obj
    >
    endobj
    57 0 obj
    >
    endobj
    58 0 obj
    >
    endobj
    59 0 obj
    >
    endobj
    60 0 obj
    >
    endobj
    61 0 obj
    >
    endobj
    62 0 obj
    >
    endobj
    63 0 obj
    >
    endobj
    64 0 obj
    >
    endobj
    65 0 obj
    >
    endobj
    66 0 obj
    >
    endobj
    67 0 obj
    >
    endobj
    68 0 obj
    >
    endobj
    69 0 obj
    >
    endobj
    70 0 obj
    >
    endobj
    71 0 obj
    >
    endobj
    72 0 obj
    >
    endobj
    73 0 obj
    >
    endobj
    74 0 obj
    >
    endobj
    75 0 obj
    >
    endobj
    76 0 obj
    >
    endobj
    77 0 obj
    >
    endobj
    78 0 obj
    >
    endobj
    79 0 obj
    >
    endobj
    80 0 obj
    >
    endobj
    81 0 obj
    >
    endobj
    82 0 obj
    >
    endobj
    83 0 obj
    >
    endobj
    84 0 obj
    >
    endobj
    85 0 obj
    >
    endobj
    86 0 obj
    >
    endobj
    87 0 obj
    >
    endobj
    88 0 obj
    >
    endobj
    89 0 obj
    >
    endobj
    90 0 obj
    >
    endobj
    91 0 obj
    >
    endobj
    92 0 obj
    >
    endobj
    93 0 obj
    >
    endobj
    94 0 obj
    >
    endobj
    95 0 obj
    >
    endobj
    96 0 obj
    >
    endobj
    97 0 obj
    >
    endobj
    98 0 obj
    >
    endobj
    99 0 obj
    >
    endobj
    100 0 obj
    >
    endobj
    101 0 obj
    >
    endobj
    102 0 obj
    >
    endobj
    104 0 obj [/Pattern /DeviceRGB]
    endobj
    105 0 obj
    []
    endobj
    107 0 obj
    >stream
    x][۸~q; rnEP H}(Pd.Fn=?6+?5!~߼CY»-zh2cZb78x[Z/Bk}q2YHg[NXP%5tGf s{PgޔuHv.(agxFV»%\ͩ;-jV*cLyʚ]&8;Xv%e[cX!!qe#tFSɷ*flx*,Vt]ʁW1P6)nMյõ~_»

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

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

    Синтаксис ?

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

    ✖

    Обозначения

    ОписаниеПример
    <тип>Указывает тип значения.<размер>
    A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
    A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
    A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
    [ ]Группирует значения.[ crop || cross ]
    *Повторять ноль или больше раз.[,<время>]*
    +Повторять один или больше раз.<число>+
    ?Указанный тип, слово или группа не является обязательным.inset?
    {A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
    #Повторять один или больше раз через запятую.<время>#
    Пример
    
<!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>

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

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

    ✖

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

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
    • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft (Черновик спецификации) — первая черновая версия стандарта.

    Браузеры: Настольные Мобильные    

    ?

    Internet ExplorerChromeOperaSafariFirefox
    71931
    AndroidFirefox MobileOpera MobileSafari Mobile
    1193

    ✖

    Браузеры

    В таблице браузеров применяются следующие обозначения.

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

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

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

    — CSS: каскадные таблицы стилей

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

     
Заголовок] {
  цвет: фиолетовый;
}


a [href = "https://example.org"] {
  цвет: зеленый;
}


a [href * = "example"] {
  размер шрифта: 2em;
}


a [href $ = ". org"] {
  стиль шрифта: курсив;
}


a [class ~ = "logo"] {
  отступ: 2 пикселя;
}
    [ attr ]
    Представляет элементы с именем атрибута attr .
    [ attr = value ]
    Представляет элементы с именем атрибута attr , значение которого точно равно значению .
    [ attr ~ = значение ]
    Представляет элементы с именем атрибута attr , значение которого представляет собой список слов, разделенных пробелами, одно из которых точно соответствует значению .
    [ attr | = значение ]
    Представляет элементы с именем атрибута attr , значение которого может быть точно , значением или может начинаться со значения , сразу за которым следует дефис, – (U + 002D).= значение ]
    Представляет элементы с именем атрибута attr , значению которого предшествует префикс , значение .
    [ attr $ = значение ]
    Представляет элементы с именем атрибута attr , значение которого имеет суффикс (за которым следует) значение .
    [ attr * = значение ]
    Представляет элементы с именем атрибута attr , значение которого содержит по крайней мере одно вхождение значения в строке.
    [ attr оператор значение i]
    Добавление i (или I ) перед закрывающей скобкой приводит к тому, что значение сравнивается без учета регистра (для символов в диапазоне ASCII).
    [ attr operator value s] Это экспериментальный API, который не следует использовать в производственном коде.
    Добавление s (или S ) перед закрывающей скобкой приводит к тому, что значение сравнивается с учетом регистра (для символов в диапазоне ASCII).= «https»] [href $ = «. org»] {
    цвет: зеленый;
    }

    HTML
    Результат

    Языки

    CSS 
     
div [lang] {
  font-weight: жирный;
}


div: not ([lang]) {
  стиль шрифта: курсив;
}


div [lang ~ = "en-us"] {
  цвет синий;
}


div [lang = "pt"] {
  цвет: зеленый;
}


div [lang | = "zh"] {
  красный цвет;
}



div [data-lang = "zh-TW"] {
  цвет: фиолетовый;
}
    HTML 
      
     Привет, мир! 
    

     Olá Mundo! 
    

     您好！ 
    

     您好！ 
    

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

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

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

    CSS 
     
ol [type = "a"] {
  список-стиль-тип: нижняя альфа;
  фон: красный;
}

ol [type = "a" s] {
  список-стиль-тип: нижняя альфа;
  фон: салатовый;
}

ol [type = "A" s] {
  тип-стиль-список: верхняя альфа;
  фон: салатовый;
}
    HTML 
      
      
  
    1.  Примерный список 
      2.
    Результат

    Таблицы BCD загружаются только в браузере

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

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

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

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

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

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

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

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

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

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

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

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

    В приведенном выше примере будут найдены элементы с title = «flower», title = «summer».
    flower «и title =» flower new «, но не title =» my-flower «или title =» flowers «.

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

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

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

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

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

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

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

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

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

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

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

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

    Формы для укладки

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

    Пример

    ввод [тип = «текст»]
    {
    ширина: 150 пикселей;

    дисплей: блок;

    нижнее поле: 10 пикселей;

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

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

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

    Совет: Посетите наше руководство по CSS Forms Tutorial, чтобы узнать больше примеров того, как стилизовать формы с помощью CSS. = «https»] Выбирает каждый элемент , значение атрибута href которого начинается с https. [ атрибут $ = значение ] а [href $ = «.pdf »] Выбирает каждый элемент , значение атрибута href которого заканчивается на «.pdf» [ атрибут * = значение ] a [href * = «w3schools»] Выбирает каждый элемент , значение атрибута href которого содержит подстроку «w3schools».

    Работа с селекторами атрибутов CSS

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

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

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

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

    В следующих разделах описаны наиболее распространенные селекторы атрибутов.

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

    Это простейшая форма селектора атрибутов, который применяет правила стиля к элементу, если данный атрибут существует. Например, мы можем стилизовать все элементы с атрибутом title , используя следующие правила стиля:

    Селектор [заголовок] в приведенном выше примере соответствует всем элементам, имеющим атрибут заголовок .

    Вы также можете ограничить этот выбор конкретным элементом HTML, поместив селектор атрибутов после селектора типа элемента, например:

      abbr [название] {
    красный цвет;
}

    Селектор abbr [title] соответствует только элементам с атрибутом title , поэтому он соответствует сокращению, но не элементам привязки, имеющим атрибут title .

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

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

      input [type = "submit"] {
    граница: сплошной зеленый 1px;
}

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

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

    Вы можете использовать оператор ~ = , чтобы селектор атрибутов соответствовал любому элементу, значение атрибута которого представляет собой список значений , разделенных пробелами (например, class = "alert warning" ), одно из которых в точности равно указанное значение:

      [class ~ = "warning"] {
    цвет: #fff;
    фон: красный;
}

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

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

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

      [lang | = en] {
    цвет: #fff;
    фон: синий;
}

    Селектор в приведенном выше примере соответствует всем элементам с атрибутом lang , содержащим значение, начинающееся с и , независимо от того, следует ли за этим значением дефис и другие символы.= «http: //»] {
    фон: url («external.png») 100% 50% без повтора;
    отступ справа: 15 пикселей;
    }

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

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

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

      a [href $ = ". Pdf"] {
    фон: url ("pdf.png") 0 50% без повтора;
    отступ слева: 20 пикселей;
}

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

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

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

      [class * = "warning"] {
    цвет: #fff;
    фон: красный;
}

    Этот селектор в приведенном выше примере соответствует всем элементам HTML с атрибутом класса , значения которого содержат предупреждение .Например, он соответствует элементам, имеющим значения класса warning , alert warning , alert-warning или alert_warning и т. Д.

    Стилизация форм с переключателями атрибутов

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

      input [type = "text"], input [type = "password"] {
    ширина: 150 пикселей;
    дисплей: блок;
    нижнее поле: 10 пикселей;
    фон: желтый;
}
input [type = "submit"] {
    отступ: 2px 10px;
    граница: 1px solid # 804040;
    фон: # ff8040;
}

    [атрибут] | CSS-уловки

    Есть много способов выбора элементов в CSS.Самый простой выбор осуществляется по имени тега, например p {} . Почти все, что более конкретно, чем селектор тегов, использует атрибуты — class и ID оба выбирают эти атрибуты в элементах HTML. Но class и ID — не единственные атрибуты, которые могут выбрать разработчики. Мы можем использовать любых атрибутов элемента в качестве селекторов.

    Выбор атрибута имеет особый синтаксис. Вот пример:

      a [href = "https: // css-tricks.com "] {
  цвет: # E18728;
}

    Это селектор с точным соответствием , который будет выбирать только ссылки с точным значением атрибута href «https://css-tricks.com».

    Семь различных типов

    Селекторы атрибутов по умолчанию чувствительны к регистру (см. Сопоставление без учета регистра ниже) и записываются внутри скобок [] .

    Существует семь различных типов совпадений, которые можно найти с помощью селектора атрибутов, и для каждого из них используется свой синтаксис. = «foo»] {
    / * Значение атрибута начинается с этого * /
    }

    [значение-данных | = «foo»] {
    / * Значение атрибута начинается с этого в списке, разделенном тире * /
    }

    [data-value $ = «foo»] {
    / * Значение атрибута заканчивается этим * /
    }

    Значение содержит: значение атрибута содержит термин как единственное значение, значение в списке значений или как часть другого значения.Чтобы использовать этот селектор, добавьте звездочку (*) перед знаком равенства. Например, img [alt * = "art"] выберет изображения с альтернативным текстом «abstract art » и «спортсмен , начинающий новый вид спорта», потому что значение «art» находится в слове «start» ».

    Значение находится в списке, разделенном пробелами: значение является либо единственным значением атрибута, либо целым значением в наборе значений, разделенных пробелами. В отличие от селектора «содержит», этот селектор не будет искать значение как фрагмент слова.= «Искусство»] выберет изображения с альтернативным текстом «арт-шоу» и «художественный узор», но не изображения с альтернативным текстом «Артур Миллер», потому что «Артур» начинается с заглавной буквы.

    Значение стоит первым в списке, разделенном тире: Этот селектор очень похож на селектор «начинается с». Здесь селектор соответствует значению, которое является либо единственным значением, либо первым в списке значений, разделенных тире. Чтобы использовать этот селектор, добавьте вертикальную черту (|) перед знаком равенства.Например, li [data-years | = "1900"] выберет элементы списка со значением data-years «1900-2000», но не элемент списка со значением data-years « 1800-1900 ».

    Значение заканчивается на: значение атрибута заканчивается выбранным термином. Чтобы использовать этот селектор, добавьте знак доллара ($) перед знаком равенства. Например, a [href $ = "pdf"] выбирает каждую ссылку, которая заканчивается на .pdf.

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

    См. Селекторы атрибутов пера от CSS-Tricks (@ css-tricks) на CodePen.

    Интересный факт: значения обрабатываются как строки, поэтому вам не нужно делать какие-либо причудливые экранирования символов, чтобы они совпадали, как если бы вы использовали необычные символы в селекторе классов или идентификаторов.

      [class = "(╯ ° □ °） ╯︵ ┻━┻"] {
  красный цвет;
  font-weight: жирный;
}

    Сопоставление без учета регистра

    Селекторы атрибутов без учета регистра являются частью спецификации уровня 4 селекторов рабочей группы CSS.Как упоминалось выше, строки значений атрибутов по умолчанию чувствительны к регистру, но их можно изменить на нечувствительность к регистру, добавив i непосредственно перед закрывающей скобкой:

      [attribute = "value" i] {
  / * Стили здесь будут применяться к элементам с:
    attribute = "значение"
    attribute = "VaLuE"
    attribute = "VALUE"
    ...так далее
  * /
}

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

    См. Сопоставление атрибутов CSS без учета регистра в ручке с помощью CSS-Tricks (@ css-tricks) на CodePen.

    Объединяя их

    Вы можете комбинировать селектор атрибутов с другими селекторами, такими как тег, класс или идентификатор.

      div [attribute = "value"] {
  / * здесь правила стиля * /
}

.модуль [атрибут = "значение"] {
  / * здесь правила стиля * /
}

#header [attribute = "value"] {
  / * здесь правила стиля * /
}

    Или даже комбинируйте несколько селекторов атрибутов. В этом примере выбираются изображения с замещающим текстом, который включает слово «человек» в качестве единственного значения или значение в списке, разделенном пробелами, и — значение src , которое включает значение «lorem»:

      img [alt ~ = "person"] [src * = "lorem"] {
  / * здесь правила стиля * /
}

    См. Комбинированные атрибуты пера и выбор только атрибутов с помощью CSS-Tricks (@ css-tricks) на CodePen.

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

    Селекторы атрибутов могут использоваться в jQuery, как и любой другой селектор CSS. В JavaScript вы можете использовать селекторы атрибутов с document.querySelector () и document.querySelectorAll () .

    См. Селекторы атрибутов пера в JS и jQuery от CSS-Tricks (@ css-tricks) на CodePen.

    Связанные

    Дополнительная информация

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

    Хром Safari Firefox Opera IE Android iOS
    Любая Любая Любая Любые 7+ Любая Любая

    11 селекторов CSS, которые вы должны знать.CSS — это не только .class и # id… | Джонатан Саринг

    CSS — это не только селекторы .class и #id. Познакомьтесь с более полезными селекторами CSS с примерами.

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

    Но… иногда с немного большим, чем просто базовый CSS, мы можем добиться лучших результатов. Мы можем достичь цели быстрее и в основном просто упростить поддержку вашего CSS в будущем.

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

    Не стесняйтесь предлагать более полезные селекторы или методы в комментариях ниже (с полным форматированным объяснением), и я добавлю их в список. Наслаждайтесь 📝

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

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

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

     p {
     background-color: yellow; 
    }

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

     h2 {
     выравнивание текста: центр; 
     цвет: красный; 
    } h3 {
     выравнивание текста: по центру; 
     цвет: красный; 
    } p {
     text-align: center; 
     цвет: красный; 
    }

    Вы можете это сделать.

     h2, h3, p {
     выравнивание текста: по центру; 
     цвет: красный; 
    }

    Селектор id — это еще один базовый селектор, который позволяет применять стиль ко всем указанным элементам с выбранным идентификатором. Естественно, это узкоспециализированный селектор, который превосходит более общие селекторы.Он использует #, за которым следует указанный идентификатор, чтобы применить правила стиля ко всем элементам с совпадающим идентификатором.

    Выбор всех элементов с идентификатором dog выглядит так:

     #dog {
     background-color: purple; 
    }

    Эта простота — палка о двух концах, и ее не следует использовать слишком часто, так как это может сделать кошмаром дальнейшую поддержку вашего CSS. Поэтому лучше применять классы и более абстрактную логику, чем создавать множество # id.

    Селектор классов CSS, вероятно, является наиболее часто используемым селектором.Он применяет стиль ко всем элементам с указанным атрибутом класса. Это отличный способ настроить применение правил CSS, создав атрибуты, которые можно применить к любому элементу, чтобы придать ему определенный стиль. Вы можете узнать больше здесь.

    Выбор всех элементов li с классом roomy выглядит так:

     li.roomy {
     margin: 2em; 
    }

    Селектор атрибутов CSS позволяет выбирать все элементы по имени или значению данного атрибута. Крис Койер приводит прекрасный пример, в котором эта строка HTML имеет атрибут rel со значением "friend" .

     
     Дэвид Уолш

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

     h3 [rel = "friend"] {
      цвет: фиолетовый;  
    }

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

     input [type = "checkbox"] {
      цвет: фиолетовый;  
    }

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

     a [href = "https://blog.bitsrc.io"] {
      цвет: фиолетовый;  
    }

    Последнее важное замечание: вы можете поиграть с операторами селектора, так что, например, «* =» на самом деле означает «выбрать, появляется ли следующее значение где-нибудь внутри значения атрибута целевого элемента». Прочтите этот пост A +.

    Селектор потомков является первым из семейства комбинированных селекторов CSS.

    Это семейство позволяет смешивать простые селекторы с заданной логикой.Селектор потомков — это то, как вы можете применять стили ко всем элементам, которые являются потомками указанного элемента.

    Выбор всех

    элементов, вложенных в

    элементов, выглядит следующим образом.

     div h2 {
     цвет фона: фиолетовый; 
    }

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

  • элементов внутри