Штирлиц — Сеть печатных салонов в Перми

Весь комплекс печатных услуг в Перми. Общирная сеть печатных салонов в Перми. Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми

Селекторы атрибутов: Селекторы атрибутов — CSS | MDN

=»#»] {background-color:gold} a[href$=».cn»] {color: red;} 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>

BCD tables only load in the browser

Содержание

Селекторы атрибутов | 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.="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам, у которых значение атрибута начинаются с указанного текста. А во втором — только к определённым селекторам. Использование кавычек не обязательно, но только если значение содержит латинские буквы и без пробелов.
Предположим, что на сайте требуется разделить стиль обычных и внешних ссылок — 
  ссылки, которые ведут на другие сайты. Чтобы не вводить в тег <a> новый класс, воспользуемся селекторами атрибутов. Внешние ссылки характеризуются 
  добавлением к адресу протокола, например, для доступа к гипертекстовым документам 
  используется протокол HTTP. Поэтому внешние ссылки начинаются с ключевого слова http://, его и добавляем к селектору A, 
  как показано в примере 13.3. 
 
Пример 13.3. Изменение стиля внешней ссылки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href^="http://"] { 
    font-weight: bold /* Жирное начертание */
   }
  </style>
 </head>
 <body>
  
  <p><a href="1.html">Обычная ссылка</a> | 
  <a href="http://htmlbook.ru" target="_blank">Внешняя 
  ссылка на сайт htmlbook.ru</a></p>
  
 </body>
</html>
Результат примера показан ниже (рис. 13.3).
Рис. 13.3. Изменение стиля для внешних ссылок
В данном примере внешние ссылки выделяются жирным начертанием. Также можно 
 воспользоваться показанным в примере 13.2 приёмом и добавлять к ссылке 
 небольшое изображение, которое будет сообщать, что ссылка ведёт на другой сайт.
Значение атрибута оканчивается определённым текстом
Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным 
 текстом. Синтаксис применения следующий.
[атрибут$="значение"] { Описание правил стиля } 
Селектор[атрибут$="значение"] { Описание правил стиля }
В первом случае стиль применяется ко всем элементам у которых значение атрибута завершается заданным 
 текстом. А во втором — только к определённым селекторам.
Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для 
 ссылок на сайты других доменов вроде com, как показано в примере 13.4.
Пример 13.4. Стиль для разных доменов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   A[href$=".ru"] { /* Если ссылка заканчивается на .ru */
    background: url(images/ru.png) no-repeat 0 6px; /* Добавляем фоновый рисунок */ 
    padding-left: 12px; /* Смещаем текст вправо */ 
   } 
   A[href$=".com"] { /* Если ссылка заканчивается на .com */
    background: url(images/com.png) no-repeat 0 6px; 
    padding-left: 12px;
   }
  </style>
 </head>
 <body>
  
  <p><a href="http://www.yandex.com">Yandex.Com</a> | 
     <a href="http://www.yandex.ru">Yandex.Ru</a></p>
  
 </body>
</html>
В данном примере содержатся две ссылки, ведущие на разные домены — com 
 и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая 
 картинка (рис. 13.4). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». 
 Заметьте, что добавив к имени домена слэш (http://www.yandex.ru/) или адрес 
 страницы (http://www.yandex.ru/fun.html), мы изменим тем самым окончание и стиль 
 применяться уже не будет. В этом случае лучше воспользоваться селектором, у которого заданный текст встречается в любом месте значения атрибута.
Рис. 13.4. Добавление картинки к ссылкам
Значение атрибута содержит указанный текст
Возможны варианты, когда стиль следует применить к тегу с определённым 
 атрибутом, при этом частью его значения является некоторый текст. При этом точно не известно, 
 в каком месте значения включен данный текст — в начале, середине или конце. В подобном случае следует использовать 
 такой синтаксис.
[атрибут*="значение"] { Описание правил стиля } 
Селектор[атрибут*="значение"] { Описание правил стиля }
В примере 13.5 
 показано изменение стиля ссылок, в атрибуте href которых встречается слово «htmlbook».
 Пример 13.5. Стиль для разных сайтов
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Селекторы атрибутов</title>
  <style>
   [href*="htmlbook"] { 
    background: yellow; /* Желтый цвет фона */
   }
  </style>
 </head>
 <body>
  <p><a href="http://www.htmlbook.ru/html/">Теги HTML</a> | 
  <a href="http://stepbystep.htmlbook.ru">Шаг за шагом</a> | 
  <a href="http://webimg.ru">Графика для Веб</a></p>
 </body>
</html>
Результат данного примера показан на рис. 13.5.
Рис. 13.5. Изменение стиля для ссылок, в адресе которых встречается «htmlbook»
Одно из нескольких значений атрибута
Некоторые значения атрибутов могут перечисляться через  пробел, например имена классов. Чтобы задать стиль при наличии в списке  требуемого значения применяется следующий синтаксис.
[атрибут~="значение"] { Описание правил стиля } 
Селектор[атрибут~="значение"] { Описание правил стиля }
Стиль применяется в том случае, если у атрибута имеется указанное  значение или оно входит в список значений, разделяемых пробелом (пример 13.6).
Пример 13.6. Стиль в зависимости от имени класса
HTML5CSS 2.1IECrOpSa 5Fx
<!DOCTYPE HTML> 
<html> 
 <head> 
  <meta charset="utf-8"> 
  <title>Блок</title> 
  <style> 
   [class~="block"] h4 { color: green; } 
  </style> 
 </head>  
 <body> 
  <div> 
   <h4>Заголовок</h4> 
  </div> 
 </body> 
</html>
В данном примере зелёный цвет текста применяется к селектору h4, если имя класса у слоя задано как block. Отметим, что аналогичный результат  можно получить, если использовать конструкцию *= вместо ~=.
 
Дефис в значении атрибута
В именах идентификаторов и классов разрешено использовать  символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class. Для изменения стиля элементов, в значении которых применяется дефис, следует  воспользоваться следующим синтаксисом.
[атрибут|="значение"] { Описание правил стиля } 
Селектор[атрибут|="значение"] { Описание правил стиля }
Стиль применяется к элементам, у которых атрибут начинается с  указанного значения или с фрагмента значения, после которого идёт дефис (пример 13.7).
Пример 13.7. Дефисы в значениях
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Блок</title>
  <style>
   DIV[class|="block"] {
    background: #306589; /* Цвет фона */
    color: #acdb4c; /* Цвет текста */
    padding: 5px; /* Поля */
   }
   DIV[class|="block"] A {
    color: #fff; /* Цвет ссылок */
   }
  </style>
 </head>
 <body>
  <div>
   <h3>Термины</h3>
   <div>
     <ul>
      <li><a href="t1.html">Буквица</a></li>
      <li><a href="t2.html">Выворотка</a></li>
      <li><a href="t3.html">Выключка</a></li>
      <li><a href="t4.html">Интерлиньяж</a></li>
      <li><a href="t5.html">Капитель</a></li>
      <li><a href="t6.html">Начертание</a></li>
      <li><a href="t7.html">Отбивка</a></li>
     </ul>
   </div>
  </div>
 </body>
</html>
 
В данном примере имя класса задано как block-menu-therm,  поэтому в стилях используется конструкция |="block", поскольку значение начинается именно с  этого слова и в значении встречаются дефисы.
 
 
Все перечисленные методы можно комбинировать между собой,  определяя стиль для элементов, которые содержат два и более атрибута. В подобных  случаях квадратные скобки идут подряд.
[атрибут1="значение1"][атрибут2="значение2"]  { Описание правил стиля } 
Селектор[атрибут1="значение1"][атрибут2="значение2"]  { Описание правил стиля }
Вопросы для проверки
1.="text2"] { color: red; }
  • P[class~="text2"] { color: red; }
  • P[class*="text2"] { color: red; }
  • P[class$="text2"] { color: red; }
    • 3. К какому элементу будет применяться следующий стиль?
    [class~="lorem"] { background: #666; }
    1. <p>Lorem ipsum dolor sit amet</p>
    2. <div>Lorem ipsum dolor sit amet</div>
    3. <p>Lorem ipsum dolor sit amet</p>
    4. <div>Lorem ipsum dolor sit amet</div>
    5. <p><span>Lorem ipsum dolor sit amet</span></p>
    Ответы
    1. INPUT[type="text"] { background: #acdacc; }
    2. P[class*="text2"] { color: red; }
    3. <div>Lorem ipsum dolor sit amet</div>
    Селекторы атрибутов | Учебные курсы
    Многие элементы HTML различаются по своему действию в зависимости от того, какие в них задействованы атрибуты. Например, <input> может создавать кнопку, текстовое поле и другие элементы формы всего лишь за счёт изменения значения атрибута type. При этом добавление стиля к селектору input поменяет оформление одновременно у всех элементов <input>. Селекторы атрибутов позволяют выбрать нужные элементы и установить для них стиль по наличию определённого атрибута или его значения.
    Рассмотрим несколько наиболее популярных вариантов применения селекторов атрибутов.
      
    Селектор [attribute]
    Устанавливает стиль для элементов, у которых присутствует указанный атрибут. Значение атрибута при этом не учитывается. В качестве селектора используются квадратные скобки, внутри которых пишется произвольный атрибут.
    [title] { border-bottom: 1px dotted blue; }
    Здесь для всех элементов, к которым добавляется атрибут title, задаётся нижнее точечное подчёркивание синего цвета.
    Чтобы сузить число элементов, перед квадратными скобками ставится имя элемента без пробелов.
    a[target] { font-weight: bold; }
    В данном случае выбираются только элементы <a>, к которым добавлен атрибут target с произвольным значением.
    В примере 1 показано изменение стиля элемента <textarea>, когда к нему добавляется атрибут readonly.
    Пример 1. Вид элемента в зависимости от его атрибута
     <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Селекторы атрибутов</title>
 <style>
 textarea {
 height: 100px; /* Высота поля */
 }
 textarea[readonly] {
 background: #f0f0f0; /* Цвет фона */
 opacity: 0.8; /* Значение прозрачности */
 }
 </style>
 </head>
 <body>
 <textarea>Это обычное текстовое поле, его можно редактировать.</textarea>
 <textarea readonly>Это текстовое поле только для чтения, вы не можете его изменить.</textarea>
 </body>
</html>
     
    В данном примере селектор textarea устанавливает стиль для всех элементов <textarea>, а селектор textarea[readonly] для элементов <textarea>, к которым добавлен атрибут readonly. Результат примера показан на рис. 1.
    Рис. 1. Изменение стиля элемента в зависимости от наличия атрибута readonly
    Учтите, что атрибут у элемента должен присутствовать явно. К примеру, для <input> атрибут type по умолчанию равен text, но селектор input[type] будет работать для <input type="text"> и не будет для <input>, хотя сами элементы отображаются одинаково.
      
    Селектор [attribute="value"]
    Устанавливает стиль для элемента, когда задано указанное значение атрибута. Например, для <input>, у которого значение type равно checkbox, селектор запишется следующим образом.
    input[type="checkbox"] { width: 20px; height: 20px; }
    Писать кавычки при этом не обязательно, но только если значение содержит латинские буквы и без пробелов. Так что input[type=checkbox] тоже работает.
    Значения чувствительны к регистру, поэтому в CSS пишите их так же, как они написаны в HTML.
    В примере 2 показано как установить стиль для элемента <input>, основываясь на его значении.="http://"] { 
 font-weight: bold; /* Жирное начертание */
 }
 </style>
 </head>
 <body> 
 <p><a href="page/new.html">Обычная ссылка</a> | 
 <a href="http://ya.ru">Ссылка на ya.ru</a> |
 <a href="http://google.ru">Ссылка на google.ru</a></p> 
 </body>
</html>
     
    Результат данного примера показан на рис. 3.
    Рис. 3. Изменение стиля ссылок
    Селектор [attribute*="value"]
    Позволяет выбрать элементы, у которых значение атрибута содержит указанный текст. При этом текст может быть в начале, в середине или в конце. К примеру, для выбора всех элементов, у которых класс содержит view, используется следующая запись.
    [class*="view"] { color: red; }
    При этом цвет изменится для элементов с классом view, view-block, viewer, overview или block-view.
    В примере 4 показано изменение стиля ссылок, в атрибуте href которых встречается слово «github». Для таких ссылок мы добавляем иконку, показывающую принадлежность к GitHub.
    Пример 4. Стиль для сайта GitHub
     <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Селекторы атрибутов</title>
 <style>
 a[href*="github"] { /* Ссылка содержит github */
 background: url(/example/image/if_GitHub.png) no-repeat 100% 50%; /* Добавляем фоновый рисунок */ 
 padding-right: 24px; /* Смещаем текст влево */
 } 
 </style>
 </head>
 <body> 
 <p><a href="https://ya.ru">Яндекс</a> | 
 <a href="https://github.com">GitHub</a></p>
 </body>
</html>
    Результат данного примера показан на рис. 4.
    Рис. 4. Изменение стиля ссылки
    Селектор [attribute$="value"]
    Устанавливает стиль для элемента, когда значение атрибута оканчивается указанным текстом. К примеру, для выбора всех элементов, у которых класс завершается view, используется следующая запись.
    [class$="view"] { color: red; }
    При этом цвет изменится для элементов с классом view, block-view, overview, но не view-block или viewer.
    Таким способом можно автоматически разделять стиль для ссылок на сайты домена ru и для ссылок на сайты других доменов вроде com, как показано в примере 5.
    Пример 5. Стиль для разных доменов
     <!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Селекторы атрибутов</title>
 <style>
 a[href$=".ru"] { /* Ссылка оканчивается на .ru */
 background: url(/example/image/ru.png) no-repeat 0 50%; /* Добавляем фоновый рисунок */ 
 padding-left: 18px; /* Смещаем текст вправо */ 
 } 
 a[href$=".com"] { /* Ссылка оканчивается на .com */
 background: url(/example/image/com.png) no-repeat 0 50%; 
 padding-left: 18px;
 }
 </style>
 </head>
 <body> 
 <p><a href="//ya.ru">Яндекс</a> | 
 <a href="//google.com">Google</a></p> 
 </body>
</html>
    В данном примере содержатся две ссылки, ведущие на разные домены — com и ru. При этом к каждой такой ссылке с помощью стилей добавляется своя фоновая картинка (рис. 5). Стилевые свойства будут применяться только для тех ссылок, атрибут href которых оканчивается на «.ru» или «.com». Заметьте, что добавив к имени домена косую черту (//ya.ru/) или адрес страницы (//ya.ru/search), мы изменим тем самым окончание и стиль применяться уже не будет.
    Рис. 5. Добавление картинки к ссылкам
    Селекторы атрибутов допустимо комбинировать между собой, чтобы выбрать элементы, содержащие два и более атрибута. К примеру, для элемента <input>, у которого есть атрибут type со значением password и атрибут required, запись будет следующей.
    input[type="password"][required] { border: 1px solid red; }
    Пробелы между селекторами атрибутов не ставятся, всё пишется в одну строку.
    Селекторы атрибутов CSS. Описание и примеры — учебник CSS
    С помощью CSS селекторов атрибутов (англ. attribute selectors) вы можете задавать стиль тем тегам, которые имеют указанные атрибуты. Пример: вы желаете присвоить определенный стиль всем фотографиям, которые имеют атрибут title, не затрагивая все остальные изображения. Делается это просто:
    
img[title] {
	width: auto;
	height: auto;
}

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

    Атрибуты со значениями
    Можно делать выборку элементов, у которых имеется определенное значение атрибута.="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-селекторами.

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

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

    Последнее обновление: 21.04.2016

    Кроме селекторов элементов мы также можем использовать селекторы их атрибутов. Например, у нас есть на веб-странице несколько полей input, а нам надо окрасить в красный цвет только текстовые поля. В этом случае мы как раз можем проверять значение атрибута type: если оно имеет значение text, то это текстовое поле, и соответственно его надо окрасить в красный цвет. Определение стиля в этом случае выглядело бы так:

    
input[type="text"]{
	
	border: 2px solid red;
}

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

    Например:

    
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Селекторы атрибутов в CSS3</title>
        <style>
			input[type="text"]{
				border: 2px solid red;
			}
        </style>
    </head>
    <body>
        <p><input type="text" /></p>
		<p><input type="password" /></p>
		<input type="submit" value="Send" />
    </body>
</html>

    Селекторы атрибутов можно применять не только к элементам, но и классам и идентификаторам.="https://"]{ color: red; }

    Если значение атрибута должно иметь в конце определенный текст, то для проверки используется символ $. Например, нам надо выбрать все изображения в формате jpg. В этом случае мы можем проверить, оканчивается ли значение атрибута src на текст ".jpg":

    
img[src$=".jpg"]{
			
	width: 100px;
}

    И еще один символ "*" (звездочка) позволяет выбрать все элементы с атрибутами, которые в своем значении имеют определенный текст (не важно где - в начале, середине или конце):

    
a[href*="microsoft"]{
			
	color: red;
}

    Данный атрибут выберет все ссылки, которые в своем адресе имеют текст "microsoft".

    Укажите несколько селекторов атрибутов в CSS



    Каков синтаксис для выполнения чего-то вроде:

    input[name="Sex" AND value="M"]

    В принципе, я хочу выбрать элемент input , который имеет атрибут name="Sex" , а также атрибут value="M" :

    <input type="radio" name="Sex" value="M" />

    Не следует выбирать такие элементы, как следующие:

    <input type="radio" name="Sex" value="F" />
    css attributes css-selectors
    Поделиться Источник John     09 сентября 2012 в 16:20

    5 ответов

    • несколько селекторов CSS

      Я хочу нацелиться на элемент HTML, когда BOTH идентификаторы и селекторы классов совпадают. Т. е. если набор полей имеет id 'id1' AND класса 'collapsed', то применяется некоторое правило CSS (чтобы его высота была уменьшена до нуля). CSS 2.1 документы предполагают, что эту задачу могут выполнять...

    • Как использовать несколько селекторов атрибутов, но для / с определенными значениями атрибутов?

      Я использую jQuery, и у меня есть следующий код HTML: <a href=/link data-a='{one:sample1,two:sample2}' data-b=true>Title</a> Я хотел бы найти приведенную выше ссылку, используя несколько селекторов атрибутов , но для/с конкретными значениями, содержащимися в атрибутах data-* . То есть...


    484

    Просто input[name=Sex][value=M] было бы неплохо. И это на самом деле хорошо описано в стандартном документе :

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

    Здесь селектор соответствует всем элементам SPAN, чей атрибут "hello" имеет точное значение "Cleveland" и чей атрибут "goodbye" имеет точное значение "Columbus":

    span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

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

    JSFiddle Демо

    Поделиться raina77ow     09 сентября 2012 в 16:22


    77

    Для объединения это:

    input[name="Sex"][value="M"] {}

    И для того, чтобы взять союз, это:

    input[name="Sex"], input[value="M"] {}

    Поделиться Yogesh Khater     20 февраля 2015 в 10:15


    32

    Объедините селекторы атрибутов:

    input[name="Sex"][value="M"]

    Поделиться Dennis     09 сентября 2012 в 16:22


    4

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

    td[someclass]

    будет работать. Но

    td [someclass]

    не будет.

    Поделиться Jean-Philippe Martin     10 августа 2017 в 20:22


    -7

    [class*="test"],[class="second"] {
background: #ffff00;
}

    Поделиться Eli     21 июня 2017 в 05:27

    Похожие вопросы:


    Regex для селекторов атрибутов данных css

    Пытаюсь постобработать некоторые CSS здесь и нуждаюсь в regex, чтобы выбрать селекторы атрибутов данных в CSS. Ему нужно будет выбрать следующие селекторы (только селектор, но полностью):...


    CSS: Несколько Селекторов Атрибутов

    Я хотел бы стилизовать входные данные формы типа email и password, но не что-либо еще. Я представлял себе что-то вроде следующего: input[type=email][type=password] { .... } Однако то, как работают...


    Могу ли я определить стиль в CSS для ввода с помощью селекторов атрибутов и класса также?

    Могу ли я определить стиль в CSS для ввода с помощью селекторов атрибутов и класса также? input[type=text].focus Выше css не работает. Но есть ли способ достичь этого?


    несколько селекторов CSS

    Я хочу нацелиться на элемент HTML, когда BOTH идентификаторы и селекторы классов совпадают. Т. е. если набор полей имеет id 'id1' AND класса 'collapsed', то применяется некоторое правило CSS (чтобы...


    Как использовать несколько селекторов атрибутов, но для / с определенными значениями атрибутов?

    Я использую jQuery, и у меня есть следующий код HTML: <a href=/link data-a='{one:sample1,two:sample2}' data-b=true>Title</a> Я хотел бы найти приведенную выше ссылку, используя несколько...


    CSS производительность между селекторами классов и атрибутов

    Мне интересно, есть ли проблема с производительностью при использовании селекторов атрибутов вместо селекторов классов. div.test {} div[test] {} P.S. : Меня интересует только производительность CSS,...


    Использование селекторов атрибутов CSS для таргетинга src фонового изображения

    Я использую атрибут background-image для назначения изображений диапазону div на моем сайте. Однако с атрибутами background-image мне также нужно назначить background-size , чтобы он выглядел...


    Невозможно настроить таргетинг xlink:href с помощью селекторов атрибутов

    Я пытаюсь избежать необходимости <use class=myicon xlink:href=myicon /> , просто ориентируясь на значение атрибута xlink:href при стилизации моего SVGs. Ни один из следующих селекторов,...


    CSS селекторы атрибутов имеют приоритет над обычными селекторами классов CSS

    Первоначально я заметил эту проблему при работе с CSS в файле SVG и подумал, что это ошибка рендеринга, но после попытки сделать это в HTML возникла та же ситуация. Возьмите следующий код: .example...


    Как добавить несколько атрибутов в InstallData Magento 2

    Пожалуйста, укажите, как добавить несколько атрибутов в один скрипт InstallData

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

    Привет, сегодня поговорим про селекторы атрибутов в css, обещаю рассказать все что знаю. Для того чтобы лучше понимать что такое селекторы атрибутов в css , настоятельно рекомендую прочитать все из категории Каскадные таблицы стилей CSS/ CSS3

    Многие теги различаются по своему действию в зависимости от того, какие в них используются атрибуты. Например, тег<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 . Об этом говорит сайт https://intellect.icu . В его функции входит создание повторяющейся фоновой картинки, но повторение фона можно отменить через значение 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 class="block tag"> 
   <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 class="block-menu-therm">
   <h3>Термины</h3>
   <div class="content">
     <ul class="menu">
      <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>

    Понравилась статья про селекторы атрибутов в css? Откомментируйте её Надеюсь, что теперь ты понял что такое селекторы атрибутов в css и для чего все это нужно, а если не понял, или есть замечания, то нестесняся пиши или спрашивай в комментариях, с удовольствием отвечу. Для того чтобы глубже понять настоятельно рекомендую изучить всю информацию из категории Каскадные таблицы стилей CSS/ CSS3

    Ответы на вопросы для самопроверки пишите в комментариях, мы проверим, или же задавайте свой вопрос по данной теме.

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

    - 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 operator value i]
    Добавление i (или I ) перед закрывающей скобкой приводит к тому, что значение сравнивается без учета регистра (для символов в диапазоне ASCII).
    [ attr operator value s]
    Добавление 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 загружаются только в браузере

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

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

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

    Селектор Пример Описание
    [ атрибут ] a [название] Соответствует элементам с атрибутом attr (имя которого указано в квадратных скобках).
    [ attr = значение ] a [href = "https://example.com"] Соответствует элементам с атрибутом attr , значение которого точно равно значению — строке внутри кавычек.
    [ attr ~ = значение ] p [class ~ = "special"]


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

    [ attr | = значение ] div [lang | = "zh"] Соответствует элементам с атрибутом attr , значение которого точно соответствует значению или начинается со значения , сразу за которым следует дефис.

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

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

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

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

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

    Селектор атрибутов 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 [атрибут * = «значение»] Селектор

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

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

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

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

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

    Пример

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

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

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

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

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

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

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


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

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

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

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *