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

Chrome Devtool Selector

About

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

Example

Elements with an id and class attribute

#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

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 1) 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 2) means that the foo attribute value:

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 3) 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





Discover More
HTML - A element (anchor)

The a (or anchor) is a html element that represents a hyperlink. It is the cornerstone: of every navigation scheme on the web. and of the importance of a page on the internet (pagerank) the...
HTML - Data attributes

Data (Key value) can be included for processing by a script using the data-=“” attributes. css attribute function Output: With an attribute selector, you can select the nodes with a certain...
Chrome Devtool Selector
Selector - Class Selector

A Class selector that selections nodes by targeting the class attribute. The shorthand Class selector names are: the class name preceded with a period. The same fully qualified is based on attribute...
Chrome Devtool Selector
Selector - Logical Not Pseudo-Class

not is a logical pseudo-class that negates its expression. Its selects elements that are not represented by its arguments. Example of a selector when the element has the class fade but not the class...
Chrome Devtool Selector
Selector API

API A selector is a boolean expression (known also as predicate) that match against elements in a DOM tree in order to select one or several node. This API was known before as the CSS and was renamed...
Chrome Devtool Selector
Selector API - Selector Group (OR,Union)

selector can be grouped to form another selector on a union level with a comma. Example: selector a or selector b attribute level Eattfooatt2 An union or an or is accomplished be separating the...
What are the attributes with whitespace-separated list of words ? ( HTML /XML)

Some attributes have as value a whitespace-separated list of words. This attributes are specials because they allow special word functions. You can make selection based on a word with the tilde equality...
What is the XHTML Role attribute? (WAI-ARIA)

The XHTML Role Attribute allows the author to annotate XML Languages with machine-extractable semantic information the purpose of an element. Most of the roles have been defined as part of Accessible...



Share this page:
Follow us:
Task Runner