How to select elements based on attribute ? (with the selector API, css)

This page is about selector expressions that select elements based on attribute.

• An ID selector and a class selector (ie selects element with ID “IdName” and the class “className”)

#IdName.className  { color:blue; }
/* shorthand for */
*[id=IdName][class=className] { color:blue; }

• The HTML

<p id="IdName" class="className">The CSS style will be applied on this paragraph</p>
<p class="className">Not on this one, even if the class value matches</p>

• The result:

• An element selector and a class selector (ie selects element “div” with the class “className”). The point . is a shorthand notation for a class selector

p.className  { color:blue; }
/* equivalent to the tilde selector (ie the class value should have the word className word) */
p[class~=className]  { color:blue; }

• The HTML

<p class="className bar">The CSS style will be applied on this text because it's a p element where the class value has the <b>className</b> word</p>
<p class="foo">Not on this one because it has not the class word  <b>className</b></div>

• The result:

Notation example: A class that starts with the string foo

[class^="foo"]

Full example

• All element with a class that starts with the string foo will get a red color

*[class^="foo"] {
  color: red
}

• The HTML

<p>A paragraph without class</p>
<p class="foo-suffix other-class">A paragraph with a class that starts with foo</p>

• Output: The paragraph with the class foo-suffix is red

• The HTML

<button role="button" aria-label="Delete item 1">Delete</button>

• The CSS

*[role="button"] {
  /* the attribute selector */
	background-color:#44c767;
	border-radius:28px;
	display:inline-block;
	color:#ffffff;
        padding:16px 31px;
}
*[role="button"]:hover {
	background-color:#5cbf2a;
}
*[role="button"]:active {
	position:relative;
	top:1px;
}

• The result:

This paragraph shows you:

• all equality
• and logical expression

that you can use to select element based on attributes.

• An E element whose foo attribute value is exactly equal to bar

E[foo="bar"]

• All element whose foo attribute value is exactly equal to bar

*[foo="bar"]

The tilde equality ¹⁾ is a equality operator that matches an element where the attribute whose value is a whitespace-separated list of words.

For instance, the below expression means that the foo attribute should contains the word bar in its value.

E[foo~="bar"]

The below expression ²⁾ means that the foo attribute value:

• is exactly bar
• or begins with “val” immediately followed by - U+002D - hyphen minus

E[foo|="bar"]

This is primarily intended to allow language subcode matches (e.g., the hreflang attribute on the a element in HTML ). For lang (or xml:lang) language subcode matching, please see the :lang() pseudo-class.

Other example on lang, the following selector represents an a element for which the value of the hreflang attribute:

• begins with en,
• including en, en-US, and en-scouse

a[hreflang|="en"]

Example:

E[foo^="bar"]

The Caret equality operator ³⁾ represents an element with the att attribute whose value begins with the prefix “val” (If “val” is the empty string then the selector does not represent anything)

This start with operator permits to define a starts with comparison

E[foo$="bar"]

The dollar equality operator represents an element with the att attribute whose value ends with the suffix “val” (If “val” is the empty string then the selector does not represent anything)

It represents an element with the att attribute whose value contains at least one instance of the substring “val” (If “val” is the empty string then the selector does not represent anything)

E[foo*="bar"]

• An element:
  • with the tag name E
  • that has a foo attribute

E[foo]

• All elements with a foo attribute

*[foo]

Html example: the selector represents a span element whose class attribute has exactly the value example:

span[class="example"]

With the not pseudo-class function

E:not([foo])

• All elements without a foo attribute with the universal selector. You should not use it without any context otherwise it would apply also to the root element)

*:not([foo])

Example: Colors element without a class attribute

• The HTML

<p class="foo">A paragraph with only the class attribute</p>
<div id="foo">A div with only the id attribute</div>

• The css that color all descendants elements of the body without a class attribute

body *:not([class]) { color: skyBlue };

• Result

To create a AND operation, just add another attribute expression (expression between brackets).

Example:

span[hello="Cleveland"][goodbye="Columbus"]

where this selector represents a span element:

• whose hello attribute has exactly the value Cleveland
• and whose goodbye attribute has exactly the value Columbus