Selectors (core)
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 3 | 18 | 1 | |
| Other | ||||||
| The child combinator (>) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSS class selector matches elements based on the contents of their class attribute. | 1 | 12 | 1 | 1 | 18 | 1 |
| The descendant combinator — typically represented by a single space (" ") character — combines two selectors such that elements matched by the second selector are selected if they have an ancestor (parent, parent's parent, parent's parent's parent, etc.) element matching the first selector. Selectors that utilize a descendant combinator are called… | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSS ID selector matches an element based on the value of the element's id attribute. In order for the element to be selected, its id attribute must match exactly the value given in the selector. | 1 | 12 | 1 | 1 | 18 | 1 |
| The CSS selector list (,) selects all the matching nodes. A selector list is a comma-separated list of selectors. | 1 | 12 | 1 | 1 | 18 | 1 |
| The next-sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element. | 1 | 12 | 1 | 1 | 18 | 1 |
| The subsequent-sibling combinator (~, a tilde) separates two selectors and matches all instances of the second element that follow the first element (not necessarily immediately) and share the same parent element. | 1 | 12 | 1 | 3 | 18 | 1 |
| The CSS type selector matches elements by node name. In other words, it selects all elements of the given type within a document. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS selector | ||||||
namespaces Namespaces (`ns|elementName`) | 1 | 12 | 1 | 1.3 | 18 | 1 |
| Other | ||||||
| The CSS universal selector (*) matches elements of any type. | 1 | 12 | 1 | 1 | 18 | 1 |
| CSS selector | ||||||
namespaces Namespaces (`*|*`) | 1 | 12 | 1 | 1.3 | 18 | 1 |
Syntax
h1 { color: navy; }
.card > .title { font-weight: bold; }
#main p { line-height: 1.6; }
a[href^="https"] { color: green; }Live demo
Use cases
-
Using Selectors (core)
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.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.