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

About

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

Example

Elements with an id and class 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:

Elements with a class attribute that has a specific value

• 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:

Elements that have a class value that starts with

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

Select elements with the role attribute as button

• 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:

Syntax

This paragraph shows you:

• all equality
• and logical expression

that you can use to select element based on attributes.

Value Equality

Exact equality

• 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"]

Contains a word (Tilde Equality Operator)

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"]

Starts with followed by minus (Pipe Equality Operator)

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"]

Starts with (Caret equality operator)

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

Ends with (Dollar equality operator)

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)

Contains (The star equality operator)

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"]

Logical Operators

Have an attribute

• 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"]

Not - Have not an attribute

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

And - Have attributes A and B

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