Css not attribute value

Attribute selectors

As you know from your study of HTML, elements can have attributes that give further detail about the element being marked up. In CSS you can use attribute selectors to target elements with certain attributes. This lesson will show you how to use these very useful selectors.

Prerequisites:	Basic computer literacy, basic software installed, basic knowledge of working with files, HTML basics (study Introduction to HTML), and an idea of how CSS works (study CSS first steps.)
Objective:	To learn what attribute selectors are and how to use them.

Presence and value selectors

These selectors enable the selection of an element based on the presence of an attribute alone (for example href ), or on various different matches against the value of the attribute.

Matches elements with an attr attribute whose value is exactly value, or contains value in its (space separated) list of values.

In the example below you can see these selectors being used.

• By using li[class] we can match any list item with a class attribute. This matches all of the list items except the first one.
• li[class=»a»] matches a selector with a class of a , but not a selector with a class of a with another space-separated class as part of the value. It selects the second list item.
• li[class~=»a»] will match a class of a but also a value that contains the class of a as part of a whitespace-separated list. It selects the second and third list items.

Substring matching selectors

These selectors allow for more advanced matching of substrings inside the value of your attribute. For example, if you had classes of box-warning and box-error and wanted to match everything that started with the string «box-«, you could use [class^=»box-«] to select them both (or [class|=»box»] as described in section above).

Selector	Example	Description
[attr^=value]	li[class^=»box-«]	Matches elements with an attr attribute, whose value begins with value.
[attr$=value]	li[class$=»-box»]	Matches elements with an attr attribute whose value ends with value.
[attr*=value]	li[class*=»box»]	Matches elements with an attr attribute whose value contains value anywhere within the string.

(Aside: It may help to note that ^ and $ have long been used as anchors in so-called regular expressions to mean begins with and ends with respectively.)

The next example shows usage of these selectors:

• li[class^=»a»] matches any attribute value which starts with a , so matches the first two list items.
• li[class$=»a»] matches any attribute value that ends with a , so matches the first and third list item.
• li[class*=»a»] matches any attribute value where a appears anywhere in the string, so it matches all of our list items.

Case-sensitivity

If you want to match attribute values case-insensitively you can use the value i before the closing bracket. This flag tells the browser to match ASCII characters case-insensitively. Without the flag the values will be matched according to the case-sensitivity of the document language — in HTML’s case it will be case sensitive.

In the example below, the first selector will match a value that begins with a — it only matches the first list item because the other two list items start with an uppercase A. The second selector uses the case-insensitive flag and so matches all of the list items.

Note: There is also a newer value s , which will force case-sensitive matching in contexts where matching is normally case-insensitive, however this is less well supported in browsers and isn’t very useful in an HTML context.

Summary

Now that we are done with attribute selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors.

Found a content problem with this page?

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

Your blueprint for a better internet.

Источник

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.

Источник

How to select HTML element without attribute with CSS?

There might be cases, where You want to select element that does not have particular attribute. Not have attribute might actually mean two different aspects. One could consider empty attribute like if it not exists, while other would said that the element have attribute but empty. We will focus here on case where we treat both empty or non existent attribute as non existent.

The use case here is to select all bare links, in other words those links that do not have any CSS class applied. To select those elements, we need to use attribute selector twice, once assuming empty content and the other one assuming no attribute at all. To select elements without attribute we can use not selector extension while for empty attribute attribute just CSS attribute selector with empty value.

Example

Selecting all a elements that do not have CSS class applied:

The first selector selects all a elements that do not have class attribute, the latter one selects all with empty class attribute. The same technique can be used to select any other elements with empty attribute.

The selector will match for example:

Selecting Elements That Don’t Have Particular Attribute or Have It Empty

As in class example we need to combine not attribute selector with empty attribute selector:

This will match any div element without (or empty) id attribute:

But will not match if element have any value on id attribute:

Selecting Elements That Don’t Have Particular Attribute

The slightly different case is when selecting element that do not have attribute. The empty value means that attribute is empty but it still exists. To select such elements we will use only not operator.

For example let’s use data-name custom attribute selector:

This will match elements that do not have data-name attribute:

But it will not match those which have empty data-name attribute:

Источник