CSS selectors

Back to the index.

CSS2 selectors | CSS3 selectors | CSS3 UI selectors | CSS4 selectors

Here are almost all CSS2 and 3 selectors, and the CSS3 UI selectors (mostly structural pseudo-classes).

This is the desktop table. See also the mobile table.

Last major update on 12 February 2013.

Basics

Selector	IE5.5	IE7	FF 18 Win	Safari 6.0.2 Mac	Chrome 24 Win	Opera 12.14 Win
Element selector `p`	Yes		Yes	Yes	Yes	Yes
Element selector `p`
Class selector `p.test`	Yes		Yes	Yes	Yes	Yes
Class selector `p.test`
ID selector `p#test`	Yes		Yes	Yes	Yes	Yes
ID selector `p#test`
Descendant selector `p span`	Yes		Yes	Yes	Yes	Yes
Descendant selector `p span`
* selector Selects all elements	Yes		Yes	Yes	Yes	Yes
* selector Selects all elements
Multiple classes Two or more class names	Buggy	Yes	Yes	Yes	Yes	Yes
Multiple classes Two or more class names	IE6 and lower make a mistake; when confronted with `p.test.small` they act as if the selector is `p.small`.

Combinators

Selector	IE5.5	IE7	IE8	IE9	FF 18 Win	Safari 6.0.2 Mac	Chrome 24 Win	Opera 12.14 Win
> selector Selects an element that is a child of another element	No	Yes			Yes	Yes	Yes	Yes

+ selector Selects an element that is a next sibling of another element	No	Static	Almost	Yes	Yes	Yes	Yes	Yes
	Static The browser doesn’t correctly update the styles of the original element when another element is placed before it. IE8 updates correctly, but only after you remove the focus from the test link.
~ selector Selects an element that is a general next sibling of another element	No	Yes			Yes	Yes	Yes	Yes

Attribute selectors

Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac
[attr] selector Selects an element with a certain attribute	No		Yes				Yes		Yes	Yes			Yes
[attr] selector Selects an element with a certain attribute
[attr=value] selector Selects an element with a certain attribute value	No		Yes				Yes		Yes	Yes			Yes

[attr~=value] selector Selects an element with an attribute that includes a certain value; space-separated	No		Yes				Yes		Yes	Yes			Yes

[attr^=value] selector Selects an element with a certain attribute that starts with a certain value	No		Yes				Yes		Yes	Yes			Yes

[attr$=value] selector Selects an element with a certain attribute that ends with a certain value	No		Yes				Yes		Yes	Yes			Yes

[attr*=value] selector Selects an element with a certain attribute that contains a certain value; not necessarily space-separated	No		Yes				Yes		Yes	Yes			Yes

[attr\|=value] Attribute value starts with "value" or "value-"	Not tested		Yes				Yes		Yes	Yes			Yes
	I did not test IE5-6, but assume they don’t support it.
Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac

Pseudo-elements

Selector	IE5.5	IE8	IE9	FF 18 Win	Safari 6.0.2 Mac	Chrome 24 Win	Opera 12.14 Win
:before and :after To generate content before and after an element	No	Yes		Yes	Yes	Yes	Yes

:first-letter The first first letter of an element	Yes			Yes	Almost	Almost	Almost
:first-letter The first first letter of an element	WebKit-based browsers leave the first 'T' at the start of the paragraph when you add text. Opera leaves out the 'T' of the second and subsequent sentences when you do the dynamic test.
:first-line The first line of an element	Yes			Yes	Yes	Yes	Yes
:first-line The first line of an element
::selection Text selected by the user.	No		Yes	-moz-	Yes	Yes	Yes
::selection Text selected by the user.

Pseudo-classes

Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac
:active An element in an active state.	Incomplete			Almost			Yes		Yes	Yes			Yes
:active An element in an active state.	IE 5-7 supports it only on links. IE 8-10 have a slight bug: clicking the mouse down on a nested element does not trigger `:active`. Try it in the test page by depressing the mouse button on one of the `code` examples. The `:active` styles do not kick in. IE10 on MS Surface does not have the previous bug when you touch the screen, but the `:active` styles aren’t triggered at all when you use the trackpad to click on an element.
:hover An element in a hovered state.	Incomplete		Yes				Yes		Yes	Yes			Yes
:hover An element in a hovered state.	IE 5/6 supports it only on links.
:link Unvisited link	Yes						Yes		Yes	Yes			Yes
:link Unvisited link
:not Negation of a selector	No				Yes		Yes		Yes	Yes			Yes
:not Negation of a selector
:target Element that is a target of a hash (`page.html#testHash`)	No				Incomplete		Yes		Yes	Yes			Yes
	IE doesn’t react to the Back and Forward buttons: the element doesn’t apply or remove the pseudo-class at all. This used to be an Opera problem, while IE used to get it right.
:visited Visited link	Security issue				Yes		Yes		Yes	Yes			Security issue
:visited Visited link	There’s a security issue with `:visited`. See the page for more details.
Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac

Structural pseudo-classes

Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac
:empty Empty elements	No				Yes		Yes		Yes	Yes			Yes
:empty Empty elements
:first-child An element that is the first child of its parent	No		Static	Almost	Yes		Yes		Yes	Yes			Yes
	Static Browser doesn’t update the styles when elements are added dynamically. IE8 does the right thing only after you remove the focus from the test link.
:first-of-type The first element of its type.	No				Yes		Yes		Yes	Yes			Yes
:first-of-type The first element of its type.
:last-child An element that is the last child of its parent	No				Yes		Yes		Yes	Yes			Yes
:last-child An element that is the last child of its parent
:last-of-type The last element of its type.	No				Yes		Yes		Yes	Yes			Yes
:last-of-type The last element of its type.
Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac
:nth-child() Select elements according to a formula	No				Yes		Yes		Yes	Yes			Yes
:nth-child() Select elements according to a formula
:nth-last-child()	No				Yes		Yes		Yes	Yes			Yes
:nth-last-child()
:nth-last-of-type()	No				Yes		Yes		Yes	Yes			Yes
:nth-last-of-type()
:nth-of-type() Select elements according to a formula	No				Yes		Yes		Yes	Yes			Yes
:nth-of-type() Select elements according to a formula
:only-child An element that is the only child of its parent	No				Yes		Yes		Yes	Yes			Yes
:only-child An element that is the only child of its parent
:only-of-type The only element of its type.	No				Yes		Yes		Yes	Yes			Yes
:only-of-type The only element of its type.
:root The root element, or initial containing block.	No				Yes		Yes		Yes	Yes			Yes
:root The root element, or initial containing block.
Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac

UI state pseudo-classes

Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac
:checked Checked elements (checkboxes or radios)	No	Yes	Yes	Yes	Yes	Yes

:default Default choices in select boxes or groups of radio buttons	No	Yes	No	No	Incomplete
Tested on radio buttons and select boxes. Opera doesn’t support it on select boxes.
:disabled Disabled form fields	No	Yes	Yes	Yes	Yes	Yes

:enabled Non-disabled form fields	No	Yes	Yes	Yes	Yes	Yes

:focus Form fields that have the keyboard focus	No	Yes	Yes	Yes	Yes	Yes

:in-range Form fields with values that are in range (numbers)	No	No	Yes	Yes	Yes

Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac
:invalid Form field with value that does not conform to `pattern`	No	Yes	Yes	Yes	Yes	Yes

:optional Non-required form fields	No	Yes	Yes	Yes	Yes	Yes

:out-of-range Form fields with values that are not in range (numbers)	No	No	Yes	Yes	Yes

:read-only Readonly form fields	No	No	Yes	Yes	Yes

:read-write Non-readonly form fields	No	No	Yes	Yes	Yes

:required Required form fields	No	Yes	Yes	Yes	Yes	Yes

:valid Form field with value that conforms to `pattern`	No	Yes	Yes	Yes	Yes	Yes

Selector	IE5.5	IE6	IE7	IE8	IE9	IE10	FF 18 Win	FF 18 Mac	Safari 6.0.2 Mac	Chrome 24 Win	Chrome 24 Mac	Yandex 1.5 Mac	Opera 12.14 Win	Opera 12.14 Mac

Not yet supported

Here are tests for selectors that aren’t supported yet:

! selector
[attr=value i] for case-insensitive attribute values.
:any-link. Selects any link, whether visited or unvisited.
:local-link. Selects a link that points to the same domain.
:matches, :nth-match and :nth-last-match for matching a selector list such as p,h3.

Not tested

I do not test the time-dimensional pseudo-classes (I don’t test with a speech browser), the :scope pseudo-class (no syntax given), :indeterminate (too complex; and I think the definition is wrong) or the column-related pseudo-classes (syntax in overview table and in spec itself differs), :dir and :lang.