Selector API

About

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 Selector API and was renamed to show that the selection is not only used by CSS but also by other technoclogy such as Javascript DOM selection.

A basic selector:

  • takes an element in a tree structure
  • and tests whether the element matches the selector or not.

selector can be grouped.

This language consists of predicates expression that filter / select elements by:

Usage

Syntax

See Selector Overview.

Type Example Description
Universal Selector * Any element
Actual Selector :scope The actual / context element
Tag selector E An element of type E
Id Selector E#myid An E element with ID equal to myid
Id Selector #myid Any element with ID equal to myid (equivalent to *#myid)
Attribute selector E[foo] An E element with a foo attribute
Attribute selector E[foo=“bar”] An E element whose foo attribute value is exactly equal to bar

Type:

Management

Validate

To validate your selector on a HTML page, you can use the devtool

Example with A chrome cheatsheet:

Chrome Devtool Selector

Ref

Reference

Task Runner