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»]
    TargetOK?
    _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»]
    titleOK?
    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>  <!-- OK -->
    <h2>CSS Tutorial</h2>  <!-- OK -->
    
    <p>CSS Selector Tutorial</p>  <!-- OK -->
    <p>CSS Selector Tutorial</p>  <!-- OK -->
    
    <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"]
    hrefOK?
    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 [attribute = "value"] Селектор

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

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


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

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

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

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


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

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

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

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


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

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

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

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


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

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

    Пример

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

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

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

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

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

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

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

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

    Языки

    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. Пример списка
    Результат

    таблиц 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 устанавливает заголовок веб-элемента.

    Найди свой учебный лагерь