Css проверить наличие атрибута

Attribute selectors

The CSS attribute selector matches elements based on the element having a given attribute explicitly set, with options for defining an attribute value or substring value match.

The case sensitivity of attribute names and values depends on the document language. In HTML, attribute names are case insensitive, as are spec-defined enumerated values. The case-insensitive HTML attribute values are listed in the HTML spec. For these attributes, the attribute value in the selector is case-insensitive, regardless of whether the value is invalid or the attribute for the element on which it is set is invalid.

If the attribute value is case sensitive, like class , id , and data-* attributes, the attribute selector value match is case-sensitive. Attributes defined outside of the HTML specification, like role and aria-* attributes, are also case-sensitive. Normally case-sensitive attribute selectors can be made case-insensitive with the inclusion of the case-insensitive modifier ( i ).

Syntax

Represents elements with an attribute name of attr.

Represents elements with an attribute name of attr whose value is exactly value.

Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, — (U+002D). It is often used for language subcode matches.

Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.

Represents elements with an attribute name of attr whose value is suffixed (followed) by value.

Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.

Adding an i (or I ) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).

[attr operator value s] Experimental

Adding an s (or S ) before the closing bracket causes the value to be compared case-sensitively (for characters within the ASCII range).

Examples

Links

CSS

a  color: blue; > /* Internal links, beginning with "#" */ a[href^="#"]  background-color: gold; > /* Links with "example" anywhere in the URL */ a[href*="example"]  background-color: silver; > /* Links with "insensitive" anywhere in the URL, regardless of capitalization */ a[href*="insensitive" i]  color: cyan; > /* Links with "cAsE" anywhere in the URL, with matching capitalization */ a[href*="cAsE" s]  color: pink; > /* Links that end in ".org" */ a[href$=".org"]  color: red; > /* Links that start with "https://" and end in ".org" */ a[href^="https://"][href$=".org"]  color: green; > 

HTML

ul> li>a href="#internal">Internal linka>li> li>a href="http://example.com">Example linka>li> li>a href="#InSensitive">Insensitive internal linka>li> li>a href="http://example.org">Example org linka>li> li>a href="https://example.org">Example https org linka>li> ul> 

Result

Languages

CSS

/* All divs with a `lang` attribute are bold. */ div[lang]  font-weight: bold; > /* All divs without a `lang` attribute are italicized. */ div:not([lang])  font-style: italic; > /* All divs in US English are blue. */ div[lang~="en-us"]  color: blue; > /* All divs in Portuguese are green. */ div[lang="pt"]  color: green; > /* All divs in Chinese are red, whether simplified (zh-Hans-CN) or traditional (zh-Hant-TW). */ div[lang|="zh"]  color: red; > /* All divs with a Traditional Chinese `data-lang` are purple. */ /* Note: You could also use hyphenated attributes without double quotes */ div[data-lang="zh-Hant-TW"]  color: purple; > 

HTML

div lang="en-us en-gb en-au en-nz">Hello World!div> div lang="pt">Olá Mundo!div> div lang="zh-Hans-CN">世界您好！div> div lang="zh-Hant-TW">世界您好！div> div data-lang="zh-Hant-TW">世界您好！div> 

Result

HTML ordered lists

The HTML specification requires the type attribute to be matched case-insensitively because it is primarily used in the element. Note that if a modifier is not supported by the user agent, then the selector will not match.

CSS

/* Case-sensitivity depends on document language */ ol[type="a"]  list-style-type: lower-alpha; background: red; > ol[type="b" s]  list-style-type: lower-alpha; background: lime; > ol[type="B" s]  list-style-type: upper-alpha; background: grey; > ol[type="c" i]  list-style-type: upper-alpha; background: green; > 

HTML

ol type="A"> li> Red background for case-insensitive matching (default for the type selector) li> ol> ol type="b"> li>Lime background if `s` modifier is supported (case-sensitive match)li> ol> ol type="B"> li>Grey background if `s` modifier is supported (case-sensitive match)li> ol> ol type="C"> li> Green background if `i` modifier is supported (case-insensitive match) li> ol> 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• attr()
• Selecting a single element: Document.querySelector() , DocumentFragment.querySelector() , or Element.querySelector()
• Selecting all matching elements: Document.querySelectorAll() , DocumentFragment.querySelectorAll() , or Element.querySelectorAll()
• Case-insensitive attribute selector values on WHATWG

Found a content problem with this page?

This page was last modified on Jun 29, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

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

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

Селектор по наличию атрибута [attr]

Это самый простой селектор. Для примера я возьму блок с дата-атрибутом надуманного плагина анимации появления элементов. Добавлю два элемента div в html разметку добавлю им стили для видимости:

Первому блоку добавлю атрибут data-animation-type

первый
 
Этому блоку будет добавлена анимация. Для того, что-бы получить именно этот блок, нужно прописать следующий селектор:

Для видимости того, что работает этот селектор, я поменяю цвет текста на белый:

Но для анимации, конечно, будут другие стили, например время анимации

Селектор по наличию атрибута с точным значением [attr=value]

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

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

Что-бы визуально было видно работу этого селектора, я второму блоку сделаю фоновый цвет немного темнее.

[data-animation-type="top-to-bottom"]

Селектор с одним из значений атрибута [attr~=value]

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

Добавив второе значение, один из селекторов у нас перестал работать, а именно по точному значению атрибута:

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

[data-animation-type~="top-to-bottom"]

И наш второй блок вновь потемнел:

Второй блок вновь потемнел

[attr|=value] Обозначает элемент с именем атрибута attr .

Его значение при этом может быть или в точности равно value или может начинаться с value со сразу же следующим «-» (U+002D). Это может быть использовано когда язык описывается с подходом.

Где можно применить такой селектор? Например есть у нас лендинг с кучей разделов.

Первый
 
Второй
 
Третий
 
Четвёртый

У каждого раздела есть свой фоновый цвет, но есть и одинаковые правила.

section < width: 100px; height: 100px; margin: 5px; display: flex; justify-content: center; align-items: center; font-family: Arial, Helvetica, sans-serif; >.section < background-color: white; >.section-two < background-color: bisque; >.section_three < background-color: aquamarine; >.four-section

Можно не плодить классы для каждого раздела или не писать одинаковые свойства для каждого раздела, так же не нужен и глобальный селектор, а просто выбрать все классы, которые начинаются, к примеру, на section- или равны section и добавить нужные правила:

.section < background-color: white; >.section-two < background-color: bisque; >.section_three < background-color: aquamarine; >.four-section < background-color: cadetblue; >[class|="section"]

Но тут не стоит забывать, какие именно классы будут работать:

• section_three не будет работать, так как после section вместо дефиса(-) нижнее подчеркивание(_)
• four-section так же не будет работать: так как начинается класс совсем по-другому

А остальные селекторы работают отлично!

[attr^=value] Обозначает элемент с именем атрибута attr значение которого начинается с value

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

.button-button < background-color: aliceblue; >.button-submit

Для того, что бы прописать одинаковые стили нам потребуется вот такой селектор с правилами:

[attr$=value] Обозначает элемент с именем атрибута attr чьё значение заканчивается на value .

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

.block-1-heading < color: tomato; >.block-2-heading < color: brown; >.block-3-heading

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

[attr*=value] Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки value как подстроки.

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

Теперь можно поменять цвета заголовкам:

[class*="green"] < color: green; >[class*="red"] < color: red; >[class*="blue"]

Специфичнось

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

Итог

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

Источник