CSS Selectors - Grouped by Specification

Full list of CSS selectors, grouped by the CSS specification that they were introduced in.

CSS Level 1

These are the CSS selectors that were introduced in CSS Level 1.

Selector Description Example CSS / Selector Level
E Selects an element of type E
aside {
  color: orange;
}
1
E.classname Selects an E element belonging to the class named classname.
article.new {
    color: darkorange;
}
1
E#myid Selects an E element with an ID of myid.
nav#sidebar {
    color: darkorange;
}
`
1
E:link Selects an E element being the source anchor of a hyperlink of which the target is not yet visited.
a:link {
    color: orange;
}
1
E:visited Selects an E element being the source anchor of a hyperlink of which the target is already visited.
a:visited {
    color: lightsalmon;
}
1
E:active Selects an E element that is in an activated state.
a:active {
    color: red;
}
1

CSS Level 2

These are the CSS selectors that were introduced in CSS Level 2.

Selector Description Example CSS / Selector Level
* Selects all elements.
* {
  color: black;
}
2
E[foo] Selects an E element with a foo attribute.
abbr[title] {
    color: darkgreen;
}
2
E[foo="bar"] Selects an E element whose foo attribute value is exactly equal to bar.
a[target="_blank"] {
    color: olive;
}
2
E[foo~="bar"] Selects an E element whose foo attribute value is a list of whitespace-separated values, one of which is exactly equal to bar.
section[class~="fruit"] {
    background-color: orange;
}
2
E[foo|="fruit"] Selects an E element whose foo attribute value is a hyphen-separated list of values beginning with en.
section[class|="fruit"] {
    background-color: orange;
}
2
E:hover Selects an E element that is under the cursor, or that has a descendant under the cursor.
a:hover {
    color: gold;
}
2
E:focus Selects an E element that has user input focus.
textarea:focus {
    outline-color: limegreen;
}
2
E:first-child Selects an E element, first child of its parent.
tr:first-child { 
    background-color: sienna; 
}
2
E > F Selects an F element child of an E element.
h1 > em { 
    color: chocolate; 
}
2
E + F Selects an F element immediately preceded by an E element.
h1 + p { 
    color: darkgoldenrod; 
}
2

CSS Level 2/Selectors Level 4

These are the CSS selectors that were introduced in Selectors Level 2, then updated in Selectors Level 4.

Selector Description Example CSS / Selector Level
E:lang(zh, "*-hant") Selects an element of type E tagged as being either in Chinese (any dialect or writing system) or othewise written with traditional Chinese characters. Simply replace zh with the applicable language code, and *-hant with the applicable character code.
section:lang(zh, "*-hant") {
    color: orange;
}
2/4

Selectors Level 3

These are the CSS selectors that were introduced in Selectors Level 3.

Selector Description Example CSS / Selector Level
E[foo^="bar"] Selects an E element whose foo attribute value begins exactly with the string bar.
section[class^="fruit"] {
    background-color: orange;
}
3
E[foo$="bar"] Selects an E element whose foo attribute value ends exactly with the string bar.
section[class$="fruit"] {
    background-color: orange;
}
3
E[foo*="bar"] Selects an E element whose foo attribute value contains the substring bar.
section[class*="fruit"] {
    background-color: orange;
}
3
E:target

Selects an E element being the target of the referring URL.

For example, the following selector could be used to apply an orange background color to any section that is the current target as specified in the URL.

So if the document's markup includes section id="fruit", and the URL is http://example.com#fruit, the fruit section will have an orange background. But if the URL changed to say, http://example.com#vege, then the vege section will have an orange background instead (assuming it exists).

CSS:

section:target {
    background-color: orange;
}

HTML:

...
<section id="fruit">
...
</section>
...

This section will have an orange background whenever the URL includes #fruit (eg, http://example.com#fruit)

3
E:enabled Selects a user interface element E that is enabled.
input:enabled {
    color: black;
}
3
E:disabled Selects a user interface element E that is disabled.
input:disabled {
    color: gray;
}
3
E:checked

Selects a user interface element E that is checked/selected (for example, a radio-button or checkbox).

Can be used to style the element's label.

input[type="checkbox"]:checked + label { 
    color: limegreen; 
}
3
E:root

Selects an E element, root of the document.

In most cases, when using HTML this will match the html element, however, this may not always be the case if using another language such as SVG or XML.

:root { 
    background-color: cornsilk; 
}
3
E:empty Selects an E element that has no children (not even text nodes).
div:empty { 
    display: none; 
}
3
E:nth-child(n [of S]?) Selects an E element, the n-th child of its parent matching S.
tr:nth-child(3) { 
    background-color: rosybrown; 
}
3
E:nth-last-child(n [of S]?) Selects an E element, the n-th child of its parent matching S, counting from the last one.
tr:nth-last-child(3) { 
    background-color: rosybrown; 
}
3
E:last-child Selects an E element, last child of its parent.
tr:last-child { 
    background-color: sienna; 
}
3
E:only-child Selects an E element, only child of its parent.
p:only-child { 
    font-size: 2em; 
}
3
E:nth-of-type(n) Selects an E element, the n-th sibling of its type.
tr:nth-of-type(odd) { 
    background-color: whitesmoke; 
}
3
E:nth-last-of-type(n) Selects an E element, the n-th sibling of its type, counting from the last one.
tr:nth-last-of-type(3) { 
    background-color: slategrey; 
}
3
E:first-of-type Selects an E element, first sibling of its type.
tr:first-of-type { 
    background-color: slateblue; 
}
3
E:last-of-type Selects an E element, last sibling of its type.
tr:last-of-type { 
    background-color: purple; 
}
3
E:only-of-type Selects an E element, only sibling of its type.
p:only-of-type { 
    font-size: 2em; 
}
3
E ~ F Selects an F element preceded by an E element.
h1 ~ img { 
    border: 3px solid goldenrod; 
}
3

Selectors Level 3/4

These are the CSS selectors that were introduced in Selectors Level 3, then updated in Selectors Level 4.

Selector Description Example CSS / Selector Level
E:not(s1, s2) Selects an E element that does not match either s1 or s2.
p:not(:first-child, .raw) {
    color: lime;
}
3/4

Selectors Level 3-UI/4

These are the Level 4 selectors that were introduced in Selectors Level 3-UI.

Selector Description Example CSS / Selector Level
E:read-write

Selects a user interface element E that is user alterable.

For example, an HTML input element that is not disabled and not readonly is :read-write. Also, any HTML element with contenteditable attribute set to the true state is also :read-write.

input:read-write {
    color: indigo;
}
3-UI/4
E:read-only

Selects a user interface element E that is not user alterable.

For example, an HTML input element that is disabled or readonly is :read-only.

input:read-only {
    color: gray;
}
3-UI/4
E:placeholder-shown

Selects an input control currently showing placeholder text.

This allows you to style the placeholder text. For example, change its color, etc.

input:placeholder-shown {
    color: olivedrab;
}
3-UI/4
E:default

Selects a user interface element E that is the default item in a group of related choices.

For example, it could select the initially selected option element in a select element, or the default button in the form, etc.

button:default { 
    background-color: palegreen; 
}
3-UI/4
E:valid

Selects a user-input element E that meets its data validity semantics.

input:valid { 
    outline: 1px solid limegreen; 
}
3-UI/4
E:invalid

Selects a user-input element E that doesn't meet its data validity semantics.

input:invalid { 
    outline: 1px solid red; 
}
3-UI/4
E:in-range

Selects a user-input element E whose value is in-range.

input[type="number"]:in-range { 
    background-color: lightgreen; 
}
3-UI/4
E:out-of-range

Selects a user-input element E whose value is out-of-range.

input[type="number"]:out-of-range { 
    background-color: lightcoral; 
}
3-UI/4
E:required

Selects a user-input element E that requires input.

For example, a form element with the required attribute.

input:required { 
    border: 1px solid tomato; 
}
3-UI/4
E:optional

Selects a user-input element E that does not require input.

For example, a form element without the required attribute.

input:optional { 
    border: 1px solid lightgrey; 
}
3-UI/4

Selectors Level 4

These are the CSS selectors that were introduced in Selectors Level 4.

Selector Description Example CSS / Selector Level
E:matches(s1, s2) Selects an E element that matches s1 and/or s2.
p:matches(:first-child, .raw) {
    color: lime;
}
4
E:has(rs1, rs2) Selects an E element, if either of the relative selectors rs1 or rs2, when evaluated with E as the :scope elements, match an element.
article:has(h1, span.new) {
    background-color: lightyellow;
}
4
E[foo="bar" i]

Selects an E element whose foo attribute value is exactly equal to bar, regardless of its case. Basically, using i allows you to specify "case-sensitive" when specifying the value.

So for example, Text, text, and TEXT will all be selected if i is specified.

input[type="text" i] {
    color: hotpink;
}
4
E:dir(ltr) Selects an element of type E in with left-to-right directionality (the document language specifies how directionality is determined).
section:dir(ltr) {
    background-color: orange;
}
4
E:any-link

Selects an E element being the source anchor of a hyperlink.

This is the equivalent of using both the :link and :visited pseudo-classes.

a:any-link {
    color: orange;
}
4
E:scope Selects an E element being a designated reference element.
:scope {
    background-color: lightcyan;
}
4
E:current

Selects an E element that is currently presented in a time-dimensional canvas.

For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the current item as it is being read out.

li:current {
    background-color: yellow;
}
4
E:current(s) Selects an E element that is the deepest :current element that matches selector s.
:current(p, li, dt, dd) {
    background-color: yellow;
}
4
E:past

Selects an E element that is in the past in a time-dimensional canvas.

For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have already been read out.

li:past {
    background-color: lightgrey;
}
4
E:future

Select an E element that is in the future in a time-dimensional canvas.

For example, if the contents are being read out while being displayed on a screen, this selector could be used to style the items that have yet to be read out.

li:future {
    background-color: white;
}
4
E:drop

Selects an E element that can possibly receive a drop.

For example, in HTML you can specify a drop target with the dropzone attribute. This selector can be used style those elements while the user is dragging another element to be dropped.

:drop {
    outline-color: greenyellow;
}
4
E:drop(active)

Selects an E element that is the current drop target for the item being dragged.

In other words, if the user were to release the drag, the element would be dropped on to this drop target.

:drop(active) {
    background: yellow;
}
4
E:drop(valid)

Selects an E element that could receive the item currently being dragged. It only matches if the drop target is valid for the object currently being dragged.

For example, the HTML dropzone attribute can be used to specify which types of files can be dropped onto an element.

:drop(valid) {
    background: palegreen;
}
4
E:drop(invalid) Selects an E element that cannot receive the item currently being dragged, but could receive some other item.
:drop(invalid) {
    background: lightcoral;
}
4
E:indeterminate

Selects a user interface element E that is in an indeterminate state (neither checked nor unchecked).

Can be used to style the element's label.

input[type="checkbox"]:indeterminate + label { 
    color: indianred; 
}
4
E:user-error Selects a user-altered user-input element E with incorrect input (invalid, out-of-range, omitted-but-required).
input:user-error { 
    border-color: red; 
}
4
E:blank

Selects an E element that has no content except maybe white space.

Similar to :empty, however, :blank will also select elements that contain white space (which :empty will not).

div:blank { 
    display: none; 
}
4
E F Selects an F element descendant of an E element.
h1 em { 
    color: saddlebrown; 
}
1
E >> F

Selects an F element descendant of an E element.

Note that this selector does the same thing as the previous selector (E F). This selector was introduced in CSS Selectors Level 4 to give the descendant combinator a visible, non-whitespace form and to bridge the gap between the child combinator (&g;) and the shadow-piercing descendant combinator (>>>)

h1 >> em { 
    color: saddlebrown; 
}
4
F || E Selects an E element that represents a cell in a grid/table belonging to a column represented by an element F.
col.highlighted || td {
  background: yellow;
}
4
E:nth-column(n) Selects an E element that represents a cell belonging to the nth column in a grid/table.
:nth-column(2n) {
    background: seashell;
}
4
E:nth-last-column(n) Selects an E element that represents a cell belonging to the nth column in a grid/table, counting from the last one.
:nth-last-column(2) {
    background: seashell;
}
4