Selectors (core)
CSS selectors match elements based on their type, attributes, and relationship to other elements. They define the specific elements to which a block of styles will be applied. This feature represents the oldest selectors of CSS.
Overview
CSS selectors match elements based on their type, attributes, and relationship to other elements. They define the specific elements to which a block of styles will be applied. This feature represents the oldest selectors of CSS.
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)
CSS selectors match elements based on their type, attributes, and relationship to other elements. They define the specific elements to which a block of styles will be applied. This feature represents the oldest selectors of CSS.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.
Related links
Powered by web-features