C. CSS Selectors, Levels 3 and 4

C

CSS Selectors, Levels 3 and 4

The following table lists the selectors in the Selectors Level 4 Editor’s Draft (drafts.csswg.org/selectors-4/, December 2017).

Note that selectors marked “(Level 4)” are new and may not yet be implemented by browsers. Check CanIUse.com and be sure to test well if you use them. All other selectors are part of CSS3 and are generally well supported.

Selector	Type of selector	Description
Simple selectors and combinators
*	Universal selector	Matches any element.
A	Type selector	Matches the name of an element.
A, B	Compound selector	Matches elements A and B.
A B	Descendant combinator	Matches element B only if it is a descendant of element A.
A>B	Child combinator	Matches any element B that is a child of element A.
A+B	Next-sibling combinator	Matches any element B that immediately follows any element A, where A and B share the same parent.
A~B	Subsequent-sibling combinator	Matches any element B that is preceded by A, where A and B share the same parent.
Class and ID selectors
.classname A.classname	Class selector	Matches the value of the class attribute in all elements or in a specified element.
#idname A#idname	ID selector	Matches the value of the id attribute in an element.
Attribute selectors
A[att]	Simple attribute selector	Matches any element A that has the given attribute defined, whatever its value.
A[att="val"]	Exact attribute value selector	Matches any element A that has the specified attribute set to the specified value.
A[att="val" i](Level 4)	Case-insensitive attribute value selector	Matches any element A that has the specified attribute set to the specified value, even if it does not match its capitalization (even in XML languages that may be case-sensitive). This example matches images named Icon.png, ICON.png, icon.png, and so on. `img[src="Icon.png" i]` {border: 1px solid yellow;}
A[att~="val"]	Partial attribute value selector	Matches any element A that has the specified value as one of the values in a list given to the specified attribute. `table[class~="example"]` {background: yellow;}
A[att\|="val"]	Hyphenated prefix attribute selector	Matches any element A that has the specified attribute with a value that is equal to or begins with the provided value. It is most often used to select languages, as shown here. `a[lang\|="en"]` {background-image: url(en_icon.png);}
A[att^="val"]	Beginning substring attribute selector	Matches any element A that has the specified attribute and its value begins with the provided string. `img[src^="/images/icons"]` {border: 3px solid;}
A[att$="val"]	Ending substring attribute selector	Matches any element A that has the specified attribute and its value ends with the provided string. `img[src$=".svg"]` {border: 3px solid;}
A[att*="val"]	Arbitrary substring attribute selector	Matches any element A that has the specified attribute and its value contains the provided string. `img[title*="July"]` {border: 3px solid;}
Pseudo-class selectors
:any-link (Level 4)	Link pseudo-class selector	Specifies a style for a link regardless of whether it has been visited.
:link	Link pseudo-class selector	Specifies a style for links that have not yet been visited.
:target	Target pseudo-class selector	Selects an element that is used as a fragment identifier.
:target-within (Level 4)	Generalized target pseudo-class selector	Selects an element that is used as a fragment identifier or contains an element that does.
:visited	Link pseudo-class selector	Specifies a style for links that have already been visited.
:active	User action pseudo-class selector	Selects any element that has been activated by the user, such as a link as it is being clicked.
:hover	User-action pseudo-class selector	Specifies a style for elements (typically links) that appear when the mouse is placed over them.
:focus	User action pseudo-class selector	Selects any element that currently has the input focus, such as a selected form input.
:focus-within (Level 4)	Generalized input pseudo-class selector	Selects any element that has user-input focus or contains an element that has input focus.
:focus-visible (Level 4)	User action pseudo-class selector	Selects any element that has user-input focus and the user agent has determined that a focus ring or other indicator should be drawn for that element.
:drop(active)(Level 4)	Drag-and-drop pseudo-class selector	Selects an element that is the current drop target for the item being dragged.
:drop(valid)(Level 4)	Drag-and-drop pseudo-class selector	Selects an element that could receive the item currently being dragged.
:drop(invalid)(Level 4)	Drag-and-drop pseudo-class selector	Selects an element that cannot receive the item currently being dragged but could receive some other item.
:dir(ltr)(Level 4)	Directionality pseudo-class	Selects an element with a particular writing direction. In this example, the direction is left to right. The document language determines how directionality is determined.
:lang(xx)	Language pseudo-class selector	Selects an element that matches the two-character language code. `a:lang(de)` {color: green;}
:nth-child()	Structural pseudo-class selector	Selects an element that is the nth child of its parent. The notation can include a number, a notation, or the keywords odd or even.
:nth-last-child()	Structural pseudo-class selector	Selects an element that is the nth child of its parent, counting from the last one.
:nth-of-type()	Structural pseudo-class selector	Selects the nth element of its type.
:nth-last-of-type()	Structural pseudo-class selector	Selects the nth element of its type, counting from the last one.
:first-child	Structural pseudo-class selector	Selects an element that is the first child of its parent element.
:last-child	Structural pseudo-class selector	Selects an element that is the last child of its parent element.
:only-child	Structural pseudo-class selector	Selects an element that is the only child of its parent.
:first-of-type	Structural pseudo-class selector	Selects an element that is the first sibling of its type.
:last-of-type	Structural pseudo-class selector	Selects an element that is the last sibling of its type.
:only-of-type	Structural pseudo-class selector	Selects an element that is the only sibling of its type.
:root	Tree-structural pseudo-class selector	Selects an element that is the root of the document. In HTML, it is the html element.
:empty	Tree-structural pseudo-class selector	Selects an element that has no text and no child elements.
:blank	Tree-structural pseudo-class selector	Selects an element that has no content except maybe whitespace.
:enabled	UI pseudo-class selector	Selects a UI element if it is enabled.
:disabled	UI pseudo-class selector	Selects a UI element if it is disabled.
:checked	UI pseudo-class selector	Selects a UI element (radio button or checkbox) that is checked.
:read-write (Level 4)	Mutability pseudo-class selector	Selects a UI element if it is user alterable.
:read-only (Level 4)	Mutability pseudo-class selector	Selects a UI element if it is not user alterable.
:placeholder-shown (Level 4)	Mutability pseudo-class selector	Selects an input control currently showing placeholder text.
:default (Level 4)	Default-option pseudo-class selector	Selects a UI element that is the default item in a group of related choices.
:indeterminate (Level 4)	Indeterminate-value pseudo-class selector	Selects a UI element that is an indeterminate state (neither checked nor unchecked).
:valid (Level 4)	Validity pseudo-class selector	Selects a UI element that meets its data validity semantics.
:invalid (Level 4)	Validity pseudo-class selector	Selects a UI element that does not meet its data validity semantics.
:in-range (Level 4)	Range pseudo-class selector	Selects a UI element whose value is in a specified range.
:out-of-range (Level 4)	Range pseudo-class selector	Selects a UI element whose value is not in a specified range.
:required (Level 4)	Optionality pseudo-class selector	Selects a UI element that requires input.
:optional (Level 4)	Optionality pseudo-class selector	Selects a UI element that does not require input.
:not(A)	Negation pseudo-class selector	Selects an element that does not match the simple selector A. Can also be used with compound selectors, in which case it selects an element that does not match either A or B. `:not(A, B)` { color: #ccc; }
:matches(A, B) (Level 4)	Matches-any pseudo-class selector	Selects an element that matches A and/or B. `:matches(h2, h3)` { color: #ccc;}
E:has(rA, rB) (Level 4)	Relational pseudo-class selector	Selects an element E if either of the relative selectors rA or rB, when evaluated with the element as the :scope elements, matches an element. The following example matches only a elements that contain an img: `a:has(> img)` { margin: .5em 0; }
Pseudo-element selectors
::first-letter	Pseudo-element selector	Selects the first letter of the specified element.
::first-line	Pseudo-element selector	Selects the first letter of the specified element.
::before	Pseudo-element selector	Inserts generated text at the beginning of the specified element and applies a style to it.
::after	Pseudo-element selector	Inserts generated content at the end of the specified element and applies a style to it.
Grid-structural selectors
A \|\| B (Level 4)	Grid-structural selector	Selects an element B that represents a cell in a grid/table belonging to a column represented by an element A.

Previous Chapter

B. HTML5 Global Attributes

Next Chapter

D. From HTML+ to HTML5

Table of Contents for Learning Web Design, 5th Edition

C

CSS Selectors, Levels 3 and 4

Table of Contents for
Learning Web Design, 5th Edition