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

Содержание

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

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

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

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

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

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

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута.=»a»] выбирает все значения атрибута, которые начинаются с a, что соответствует первым двум элементам списка.

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

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

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

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

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

Руководство CSS Attribute Selector

1- CSS Attribute Selector

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

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

2- CSS [Attribute] Selector

CSS [Attribute] Selector помогает вам найти элементы с указанными атрибутами (attribute) и независимо от значения данного атрибута.

Например, найти все элементы <a> с атрибутом target (независимо от значения данного атрибута).

attr-selector-example1.css

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

attr-selector-example1.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example1.css" />
   </head>
   <body>

     <h4>CSS [Attribute] Selector</h4>

     <ul>
         <li><a href="#" target="_blank">HTML Tutorial</a></li>
         <li><a href="#" target="_self">CSS Tutorial</a></li>
         <li><a href="#">Other Tutorial</a></li>
     </ul>

   </body>
</html>

3- CSS [Attribute=’value’] Selector

CSS [Attribute=’value’] Selector используется для поиска элементов, у которых значения полностью совпадают с выданными значениями. Данный Selector «Не различает прописные и строчные буквы» (Case-insensitive).

Например, найти элементы <a> со значением атрибута Target «_blank». Не различая прописные и строчные буквы (Case-insensitive).

[target=»_blank»]
Target	OK?
_blank
_Blank
_BLANK
_Self

attr-selector-example13.css

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

attr-selector-example13.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example13.css" />
   </head>
   <body>

     <h4>CSS [Attribute="value"] Selector</h4>
     <p>a[target="_blank"]</p>

     <ul>
         <li><a href="#" target="_blank">HTML Tutorial</a></li>
         <li><a href="#" target="_BLANK">Javascript Tutorial</a></li>
         <li><a href="#" target="_self">CSS Tutorial</a></li>
         <li><a href="#">Other Tutorial</a></li>
     </ul>

     <p><b>Note:</b> For [<i>attribute</i>=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>

   </body>
</html>

4- CSS [Attribute~=’value’] Selector

CSS [Attribute~=’value’] Selector используется для поиска элементов, у которых значение атрибута содержит указанное слово. Данный Selector «различает прописные и строчные буквы» (Case-sensitive).

Например, найти все элементы <img> с атрибутом title содержащим слово «cat». Примечание: Слово «cats» в данном случае не подходит, так как «cat» и «cats» являются двумя разными словами.

[title~=»cat»]
title	OK?
Cute baby cats
A Black cat
A Black Cat
A Black cat(2)
A Black cat-3
A White Cat
Tiger (Belong to the cat family)

attr-selector-example3.css

img[title~="cat"] {
   border: 2px solid green;
   padding:3px;
}

img {
  margin: 5px;
}

attr-selector-example3.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute~="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example3.css" />
   </head>
   <body>

     <h4>CSS [Attribute~="value"] Selector</h4>

     <p>img[title~="cat"]</p>

     <img src="pic-cat1.png" title="Cute baby cats"/>

     <img src="pic-cat2.png" title="A Black cat"/>

     <img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/>

     <img src="pic-deer1.png" title="A deer stands intently" />

   </body>
</html>

Если вы хотите, чтобы CSS [Attribute~=»value»] Selector «не различал строчные и прописные буквы» (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */

[Attribute~="value" i]

/** Example: */

img[title~="cat" i] {
   border: 2px solid green;
   padding:3px;
}

<img src="pic-cat1.png" title="Cute baby cats"/>

<img src="pic-cat2.png" title="A Black Cat"/> <!-- OK -->

<img src="pic-tiger1.png" title="Tiger (Belong to the cat family)"/> <!-- OK -->

<img src="pic-deer1.png" title="A deer stands intently" />

5- CSS [Attribute|=’value’] Selector

CSS [Attribute|=’value’] Selector используется для поиска элементов, у которых значение атрибута полностью подходит выданному значению, или начинается с выданного значения и после сразу идет знак минус ( — ). Данный Selector «различает прописные и строчные буквы» (Case-sensitive).

Например, найти элементы, у которых значения атрибута Class является «top» или начинается с «top-«.

[class\|=»top»]
class	OK?
top
Top
top-text
top-content
left-text top-text

attr-selector-example5.css

*[class|="top"] {
   border: 2px solid green;
   padding:3px;
}

attr-selector-example5.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute|="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example5.css" />
   </head>
   <body>

     <h4>CSS [Attribute|="value"] Selector</h4>

     <p>*[class|="top"]</p>

     <h2>CSS Tutorial</h2>
     <p>CSS Selector Tutorial</p>

     <p>....</p>

     <p><b>Note:</b> For [<i>attribute</i>|=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>

   </body>
</html>

Если вы хотите, чтобы CSS [Attribute|=»value»] Selector «не различал прописные и строчные буквы» (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */

[Attribute|="value" i]

/** Example: */

img[class|="top" i] {
   border: 2px solid green;
   padding:3px;
}

<h2>CSS Tutorial</h2>  <h2>CSS Tutorial</h2>  <p>CSS Selector Tutorial</p>  <p>CSS Selector Tutorial</p>  <p>.=".html"] href OK? http://abc.com/java-tutorial.html http://abc.com/java-tutorial.Html http://abc.com/java-tutorial.html#chapter1 http://cde.com/css.jsp

attr-selector-example9.css

a[href$=".html"] {
   color: red;
   font-weight: bold;
}

attr-selector-example9.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute$="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example9.css" />
   </head>
   <body>

     <h4>CSS [Attribute$="value"] Selector</h4>

     <p>a[href$=".html"]</p>

      <ul>
          <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
          <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
          <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
          <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
      </ul>

     <p><b>Note:</b> For [<i>attribute</i>$=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>

   </body>
</html>

Если вы хотите, чтобы CSS [Attribute$="value"] Selector "не различал прописные и строчные буквы" (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */

[Attribute$="value" i]

/** Example: */

img[href$="html" i] {
    color:red;
    font-weight: bold;
}

<ul>
      <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
      <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
       <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>

8- CSS [Attribute*='value'] Selector

CSS [Attribute*="value"] Selector используется для поиска элементов, у которых значение атрибута содержит выданное значение. Данный Selector "различает прописные и строчные буквы" (Case-sensitive).

Например, найти все элементы <a> с атрибутом HREF содержащим ".html".

*[href=".html"]**
href	OK?
http://abc.com/java-tutorial.html
http://abc.com/java-tutorial.Html
http://abc.com/java-tutorial.html#chapter1
http://cde.com/css.jsp

attr-selector-example11.css

a[href*=".html"] {
   color: red;
   font-weight: bold;
}

attr-selector-example11.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8"/>
      <title>CSS [Attribute*="value"] Selector</title>
      <link rel="stylesheet" type="text/css" href="attr-selector-example11.css" />
   </head>
   <body>

     <h4>CSS [Attribute*="value"] Selector</h4>

     <p>a[href*=".html"]</p>

      <ul>
          <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li>
          <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
          <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
          <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
      </ul>

     <p><b>Note:</b> For [<i>attribute</i>*=<i>value</i>]
       to work in IE8 and earlier, a DOCTYPE must be declared.</p>

   </body>
</html>

Если вы хотите, чтобы CSS [Attribute*="value"] Selector "не различал прописные и строчные буквы" (Case-insensitive), вы можете использовать синтаксис CSS4:

/** Syntax: */

[Attribute*="value" i]

/** Example: */

img[href*="html" i] {
    color:red;
    font-weight: bold;
}

<ul>
      <li><a href="http://abc.com/java-tutorial.html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.Html">Java Tutorial</a></li> <!-- OK -->
      <li><a href="http://abc.com/java-tutorial.html#chapter1">Java Chapter 1</a></li>
      <li><a href="http://cde.com/css.jsp">CSS Tutorial</a></li>
       <li><a href="http://other.com/tutorial">Other Tutorial</a></li>
</ul>

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

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

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

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

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

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

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

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

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


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


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


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


a [class ~ = "logo"] {
  отступ: 2 пикселя;
}

[ атрибут ]

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

[ attr = значение ]

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

[ attr ~ = значение ]

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

[ attr | = значение ]

Представляет элементы с именем атрибута attr , значение которого может быть точно , значением или может начинаться со значения , значение , сразу за которым следует дефис, – (U + 002D).= значение ]

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

[ attr $ = значение ]

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

[ attr * = значение ]

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

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

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

[ attr оператор значение с]

Добавление s (или S ) перед закрывающей скобкой приводит к тому, что значение сравнивается с учетом регистра (для символов в диапазоне ASCII).= "https"] [href $ = ". org"] {
цвет: зеленый;
}

HTML
Внутренняя ссылка Пример ссылки Нечувствительная внутренняя ссылка Пример ссылки на организацию Пример https-ссылки на организацию
Результат
Языки
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
Пример списка
Результат
таблиц BCD загружаются только в браузере
Селекторы атрибутов — изучение веб-разработки
Как вы знаете из своего изучения HTML, элементы могут иметь атрибуты, дающие дополнительные сведения о размеченном элементе.В CSS вы можете использовать селекторы атрибутов для нацеливания элементов с определенными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.
Эти селекторы позволяют выбрать элемент только на основании наличия атрибута (например, href ) или различных совпадений со значением атрибута.
Селектор Пример Описание
[ attr ] 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»] соответствует любому значению атрибута, которое начинается с a , поэтому соответствует первым двум элементам списка.
li [class $ = "a"] соответствует любому значению атрибута, которое заканчивается на a , поэтому соответствует первому и третьему элементу списка.
li [class * = "a"] соответствует любому значению атрибута, где a появляется в любом месте строки, поэтому он соответствует всем элементам нашего списка.
Если вы хотите сопоставить значения атрибутов без учета регистра, вы можете использовать значение i перед закрывающей скобкой.Этот флаг сообщает браузеру, что символы ASCII должны совпадать без учета регистра. Без флага значения будут сопоставляться в соответствии с чувствительностью к регистру языка документа — в случае HTML это будет чувствительно к регистру.
В приведенном ниже примере первый селектор будет соответствовать значению, которое начинается с a — он соответствует только первому элементу списка, потому что два других элемента списка начинаются с верхнего регистра A. Второй селектор использует флаг без учета регистра, и поэтому соответствует всем элементам списка.
Примечание : есть также более новое значение s , которое будет принудительно выполнять сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это менее хорошо поддерживается в браузерах и не очень полезно в контексте HTML. .
[атрибут] | 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-трюков (@ 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+ любой любой
CSS | Селектор атрибутов — GeeksforGeeks
Селектор атрибутов CSS используется для выбора элемента с определенным атрибутом или значением атрибута.Это отличный способ стилизовать элементы HTML, сгруппировав их на основе определенных атрибутов, и селектор атрибутов выберет эти элементы с похожими атрибутами.
Существует несколько типов селекторов атрибутов, которые обсуждаются ниже:
[атрибут] Селектор: Этот тип селектора атрибутов используется для выбора всех элементов, которые имеют указанный атрибут, и применяет свойство CSS к этому атрибуту. Например, селектор [класс] выберет все элементы с атрибутом стиля.
Пример:

< html >
< голова >
title > Селектор атрибутов title >
< style >
[class] {
text-align: center;
Цвет: зеленый;
}
.gfg {
font-size: 40px;
font-weight: жирный;
нижнее поле: -20 пикселей;
}
стиль >
головка >
< корпус > 9000
< div class = "gfg" > GeeksforGeeks div >
< p class = " geeks " > Портал информатики для вундеркиндов p >
body >
html >
Вывод:
Этот селектор используется для ограничения некоторых конкретных эл. элементов, то необходимо указать этот элемент перед селектором атрибутов.
Пример:

< html >
< голова > title > Селектор атрибутов title >
< style >
div [style] {
text-align: center;
цвет: зеленый;
размер шрифта: 40 пикселей;
font-weight: жирный;
нижнее поле: -20 пикселей;
}
p {
выравнивание текста: по центру;
font-size: 17px;
}
стиль >
головка >
< корпус > 9000
< div style = "цвет: зеленый" > GeeksforGeeks div >
< p > Портал компьютерных наук для компьютерных фанатов p >
body >
html >
Выход:
С помощью оператора запятой можно выбрать несколько элементов.
h3, p [style] { цвет фона: # 00b93e; }
[attribute = «value»] Селектор: Этот селектор используется для выбора всех элементов, атрибут которых имеет значение, точно такое же, как указанное значение.
Пример:

< html >
< голова >
title > Селектор атрибутов title >
< style >
[title = "gfg"] {
цвет: зеленый ;
размер шрифта: 40 пикселей;
font-weight: жирный;
выравнивание текста: по центру;
}
[title = "geeks"] {
font-size: 17px;
выравнивание текста: по центру;
верхнее поле: 0 пикселей;
}
стиль >
головка >
< корпус > 9000
< div title = "gfg" > GeeksforGeeks div >
< p title = " geeks " > Портал информатики для вундеркиндов p >
body >
html >
Вывод:
[атрибут ~ = "значение"] Селектор: Этот селектор используется для выбора всех элементов, значение атрибута которых представляет собой список значений, разделенных пробелами, одно из которых точно равно указанному значению.
Пример:

< html >
< голова >
title > Селектор атрибутов title >
< style >
[class ~ = "gfg"] {
color: зеленый;
размер шрифта: 40 пикселей;
font-weight: жирный;
выравнивание текста: по центру;
}
[class ~ = "geeks"] {
font-size: 17px;
выравнивание текста: по центру;
верхнее поле: 0 пикселей;
}
стиль >
головка >
< корпус > 9000
< div class = "gfg" > GeeksforGeeks div >
< div Class = " geeks " > Портал информатики для вундеркиндов
div >
< div class = " geeks ide > GeeksforGeeks - платформа кодирования
div >
корпус >
html >
Выход:
[атрибут | = значение | ”] Селектор: Этот селектор используется для выбора всех элементов, атрибут которых имеет разделенный дефисом список значений, начинающийся с указанного значения.Значение должно быть целым словом либо отдельно, либо с дефисом.
Пример:

< html >
< голова >
title > Селектор атрибутов title >
< style >
[class | = "gfg"] {
color: зеленый;
размер шрифта: 40 пикселей;
font-weight: жирный;
выравнивание текста: по центру;
}
[class | = "geeks"] {
font-size: 17px;
выравнивание текста: по центру;
верхнее поле: 0 пикселей;
}
стиль >
головка >
< корпус > 9000
< div class = "gfg" > GeeksforGeeks div >
< div Class = " geeks-ide " > Портал информатики для вундеркиндов
div >
< div class = " geeks-ide1 " > GeeksforGeeks - платформа кодирования
div 9 0012 >
корпус >
html >
Выход:
[ value ”] Селектор: Этот селектор используется для выбора всех элементов, значение атрибута которых начинается с указанного значения. = "geeks"] {
font-size: 17px;
выравнивание текста: по центру;
верхнее поле: 0 пикселей;
}
стиль >
головка >
< корпус > 9000
< div class = "gfg" > GeeksforGeeks div >
< div Class = " geeks " > Портал информатики для гиков
div >
< div class = " geekside > GeeksforGeeks платформа кодирования
div >
корпус >
html >
Выход:
[атрибут $ = значение ”] Селектор: Этот селектор используется для выбора всех элементов, значение атрибута которых заканчивается указанным значением.Значение не обязательно должно быть целым словом. Пример: < html > < головка > title > Селектор атрибутов title > < style > [class $ = "gfg"] { color: зеленый; размер шрифта: 40 пикселей; font-weight: жирный; выравнивание текста: по центру; } [class $ = "geeks"] { font-size: 17px; выравнивание текста: по центру; верхнее поле: 0 пикселей; } стиль > головка > < корпус > 9000 < div class = "gfg" > GeeksforGeeks div > < div Class = " geeksforgeeks " > Портал информатики для гиков div > < div class = " geeks " > GeeksforGee платформа кодирования div 90 012 > корпус > html > Выход:
[атрибут * value ”] Селектор: Этот селектор выбирает все элементы, значение атрибута которых содержит указанное значение, присутствующее где угодно.Значение не обязательно должно быть целым словом. Пример: < html > < голова > title > Селектор атрибутов title > < style > [class * = "gfg"] { color: зеленый; размер шрифта: 40 пикселей; font-weight: жирный; выравнивание текста: по центру; } [class * = "for"] { font-size: 17px; выравнивание текста: по центру; верхнее поле: 0 пикселей; } стиль > головка > < корпус > 9000 < div class = "gfg" > GeeksforGeeks div > < div Class = " geeksforgeeks " > Портал информатики для вундеркиндов div > < div class = " geeks for " > GeeksforGeeks - платформа кодирования di v > корпус > html > Считыватель Выход:
! Не прекращайте учиться сейчас.Получите все важные концепции конкурентного программирования с помощью веб-дизайна для начинающих | HTML курс.
Работа с селекторами атрибутов 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 с атрибутом class , который содержит значения, разделенные пробелами, одно из которых - warning .Например, он соответствует элементам, имеющим значения класса предупреждение , предупреждение предупреждение и т. Д.
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 с атрибутом class , значения которого содержат предупреждение .Например, он соответствует элементам, имеющим значения класса предупреждение , предупреждение предупреждение , предупреждение-предупреждение или предупреждение_предупреждение и т. Д.
Стилизация форм с селекторами атрибутов
Селекторы атрибутов особенно полезны для стилизации форм без class или id :
input [type = "text"], input [type = "password"] { ширина: 150 пикселей; дисплей: блок; нижнее поле: 10 пикселей; фон: желтый; } input [type = "submit"] { отступ: 2px 10px; граница: 1px solid # 804040; фон: # ff8040; }
Селектор атрибутов CSS.Полное руководство
Селекторы
CSS позволяют веб-разработчикам применять стили к определенному элементу или набору элементов на веб-странице.
При работе с селекторами вы можете решить, что хотите настроить таргетинг только на элементы с определенным атрибутом. Здесь на помощь приходит селектор атрибутов CSS. Селектор атрибутов помогает применять определенные стили только к элементам с определенным атрибутом.
В этом руководстве будет рассказано, как использовать селектор атрибутов CSS при стилизации элементов.К концу чтения этого руководства вы станете экспертом в использовании селектора атрибутов для стилизации элементов.
Атрибуты HTML
В HTML атрибуты используются для определения дополнительных характеристик или свойств элемента. Например, атрибут height устанавливает высоту изображения, а атрибут title устанавливает заголовок веб-элемента.
Найди свой учебный лагерь
Карьера Карма подходит вам с лучшими техническими учебными курсами
Получите эксклюзивные стипендии и подготовительные курсы
Вы объявляете атрибуты, используя структуру пары имя / значение.Это означает, что в файле HTML атрибут будет выглядеть следующим образом: name = «value» . Чтобы узнать больше об атрибутах в HTML, прочтите наше руководство по атрибутам HTML.
Селектор атрибутов CSS
При разработке сайта вы можете применить стиль к элементам в зависимости от того, имеют ли эти элементы определенное значение атрибута. Для этого вы используете селектор атрибутов CSS.
При использовании селектора атрибутов необходимо выполнить два шага:
Заключите имя атрибута в квадратные скобки.
Укажите стили, которые вы хотите применить к атрибутам с этим именем.
Давайте рассмотрим несколько примеров использования селектора атрибутов CSS в действии.
CSS [Атрибут]
Самая простая форма селектора атрибутов: [атрибут] . Проще говоря, вы заключаете имя атрибута в квадратные скобки.
Предположим, мы хотим установить размер шрифта каждого элемента с атрибутом title равным 16 пикселей. Мы можем сделать это с помощью этого кода:
[название] { размер шрифта: 16 пикселей; }
Код в нашем правиле CSS будет применяться только к элементам с атрибутом title.Размер шрифта любого элемента с указанным атрибутом заголовка - независимо от того, какое значение этот атрибут хранит - изменится на 16 пикселей в соответствии с приведенным выше правилом.
Вы можете сделать селектор атрибутов более точным, указав одно или оба из следующих значений:
конкретный тип элемента, к которому должно применяться правило.
значение его идентификатора атрибута (например, «title» для текста, «href» для ссылки или «class» для любого элемента).
Например, предположим, что вы хотите установить размер всего текста заголовка абзаца равным 16 пикселей.Вы можете сделать это с помощью этого кода:
[название] { размер шрифта: 16 пикселей; }
Буква p в начале селектора атрибутов указывает браузеру применять стиль шрифта только к тегам
. Часть [title] селектора инструктирует браузер применять стиль шрифта только к тегам
с указанным атрибутом title .
Следовательно, после прочтения этого кода браузер преобразует размер шрифта всех заголовков абзацев (p) в 16 пикселей.Этот код не повлияет на другой текст на странице.
CSS [атрибут = «значение»]
Селектор атрибутов [attribute = «value»] позволяет кодировщикам применять стили только к элементам, значения атрибутов которых равны значению, заданному в селекторе.
Предположим, мы хотим установить оранжевый цвет фона всех ссылок на домашнюю страницу карьерной кармы. Этот стиль должен установить оранжевый цвет фона элемента и .Мы можем выполнить это действие, используя следующий код CSS:
a [href = "карьераkarma.com"] { цвет фона: оранжевый; }
Это правило выбирает все элементы вашей веб-страницы, атрибут href которых равен оваларма.com . Затем он устанавливает оранжевый цвет фона всех этих элементов.
CSS [атрибут ~ = «значение»]
Селектор [атрибут ~ = «значение»] позволяет выбирать элементы со значениями атрибутов, которые содержат определенное слово.
Например, предположим, что вы хотите применить стиль ко всем элементам p с заголовками, соответствующими слову синий . Для этого стиля цвет текста этих элементов должен быть изменен на синий.
Для выполнения этой задачи мы можем использовать следующее правило:
p [title ~ = "blue"] { цвет синий; }
Это правило найдет все теги
, связанные с заголовками, содержащими слово «синий», и установит синий цвет текста в этих тегах
.Таким образом, если тег
имеет заголовок синего цвета или синего цвета , этот стиль будет применяться. Однако это правило будет применяться к тегу
с заголовком blueColor не , а , потому что слово blue не присутствует независимо в атрибуте.
Это отличается от селектора * = , который может не только находить определенное слово в атрибуте, но также может находить определенное значение в атрибуте.
CSS [атрибут | = «значение»]
Селектор [атрибут | = «значение»] позволяет выбирать элементы с атрибутами, которые начинаются с указанного значения (например, «верх»). Сюда входят элементы с атрибутами, которые начинаются с указанного значения и содержат дефис, за которым следует дополнительный текст (например, «верхний стиль» и другие значения «верхний»). Обратите внимание, что в коде требуется вертикальная черта (|) после слова «класс».
Например, предположим, что вы хотите назначить верхний отступ 10px каждому элементу
с атрибутом класса, который начинается с top , включая те, за которыми следуют другие значения, разделенные дефисом.Вы можете сделать это с помощью этого кода: div [class | = "top"] { padding-top: 10 пикселей; } Это правило применяет отступ в 10 пикселей к верху каждого элемента, имя класса которого начинается с top , включая элементы с именами классов, начинающимися с top- . Важно отметить, что указанное вами значение должно быть либо целым словом, либо словом с дефисом. Другими словами, наш вышеупомянутый стиль будет применяться к элементам с именами классов top style и top-style , но не к элементу с именем класса topstyle .= "paddingBottom"] { padding-bottom: 10 пикселей; } Веб-браузер пользователя применит стиль padding-bottom, который мы определили для всех тегов, имена классов которых начинаются с «paddingBottom». Итак, если у нас есть класс под названием «paddingBottomStyle», этот стиль будет применяться. Этот стиль также будет применяться к классам, называемым, например, «paddingBottom» и «paddingBottom-element». Но это не применимо к классу с именем «new-paddingBottom», который не начинается с «paddingBottom». CSS [атрибут $ = «значение»] Оператор $ = используется для выбора всех элементов, значения атрибутов которых заканчиваются определенным значением.Например, предположим, что вы хотите изменить цвет текста на серый для всего текста с гиперссылками, значения атрибута href которого оканчиваются на .app . Вы можете сделать это с помощью этого кода: a [href $ = ". App"] { цвет: серый; } Этот селектор будет применяться ко всем элементам на вашей веб-странице, чьи значения href оканчиваются на .app . CSS [атрибут * = «значение»] Оператор * = позволяет выбрать все элементы, значения атрибутов которых содержат определенное значение.В отличие от оператора ~ = , этот селектор атрибутов может найти конкретное значение в классе, а не только одно слово. Например, предположим, что вы хотите применить отступ 50 пикселей вокруг всех тегов , атрибуты класса которых содержат allPadding . Вы можете сделать это с помощью этого правила: div [class * = "allPadding"] { отступ: 50 пикселей; } Это правило устанавливает отступ 50 пикселей вокруг всех элементов HTML с атрибутами класса, которые содержат термин allPadding .Таким образом, элементы с именами классов new allPadding , окружают allPadding red , allPaddingblue и allPadding-true будут подчиняться этому стилю. Заключение Селектор атрибутов CSS позволяет разработчикам выбирать элементы на основе их значений атрибутов и применять к этим элементам определенные стили. В этом руководстве со ссылкой на примеры обсуждаются основы селекторов атрибутов и способы использования всех типов селекторов атрибутов CSS.Теперь вы готовы начать использовать селектор атрибутов CSS как профессионал. CSS - один из трех основных навыков, используемых в веб-разработке. Загрузите бесплатное приложение Career Karma сегодня, чтобы поговорить с опытным карьерным тренером, который может посоветовать вам навыки, необходимые для начала карьеры веб-разработчика. .Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт Навигация по записям Previous PostМакросы в masm32: Руководство по проектированию макросов в MASM32 Next PostИзменить фон фотографии онлайн бесплатно: Remove Background from Image – remove.bg