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 2 October 2013.

I'm writing a CSS book.

Basics

Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
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

Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
> 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	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.
~ selector Selects an element that is a general next sibling of another element	No		Yes					Yes			Yes	Yes					Yes

Attribute selectors

Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
[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.
Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux

Pseudo-elements

Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
: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 Presto 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

Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
: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	Security issue			Yes		Yes
:visited Visited link	There’s a security issue with `:visited`. See the page for more details.
Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux

Structural pseudo-classes

Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
: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.
Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
: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.
Method or property	Internet Explorer							Firefox			Safari	Opera					Chrome
Method or property	5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux

UI state pseudo-classes

Method or property	Internet Explorer	Firefox	Safari	Opera	Chrome
5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
:checked Checked elements (checkboxes or radios)	No	Yes	Yes	No	Yes	Yes	Yes

:default Default choices in select boxes or groups of radio buttons	No	Yes	No	No	Incomplete	No	No
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

Method or property	Internet Explorer	Firefox	Safari	Opera	Chrome
5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux
: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

Method or property	Internet Explorer	Firefox	Safari	Opera	Chrome
5.5	6	7	8	9	10	11	24 Win	24 Mac	24 Linux	6	12 Win	12 Mac	12 Linux	16 Win	16 Mac	30 Win	30 Mac	29 Linux

Tested browsers

Desktop browser test array 1.0.1; October 2013

IE5.5 and 6: I do not test on IE5.5 and 6 any more, so they’re not tested for newer methods and properties that they don’t support anyway. However, I copy all information from older versions of the Tables.
IE7: Trident; On Windows Vista virtualization
IE 8, 9, and 11: Trident; On separate Windows 7 virtualizations
IE10: Trident; On Windows RT (Windows 8)
Firefox: Gecko; 24 on Linux, Windows 7 and Mac
Safari: WebKit; 6.0.5 on Mac
Opera 12: Presto; 12.16 Win7, Mac, and Linux
Opera 16: Blink; 16.0 Win7 and Mac
Chrome: Blink; 30 on Win7 and Mac; 29 on Linux

Operating systems

Mac: MacBook Pro 17'' with OS 10.7.5; This is my main test station. It also runs all virtual Windows systems.
Windows Vista and 7: All downloaded from modern.ie. I use VirtualBox, and downloded the Windows 7 systems for all browsers but IE7, which runs on Vista.; The non-IE Windows browsers all run on the IE9/Win7 virtualization.
Windows RT: Microsoft Surface with Windows RT
Linux: Ubuntu 12.04 on pretty old hardware. Not fair for performance comparisons.

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.