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
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
p Yes Yes Yes Yes Yes
 
p.test Yes Yes Yes Yes Yes
 
p#test Yes Yes Yes Yes Yes
 
p span Yes Yes Yes Yes Yes
 
Selects all elements Yes Yes Yes Yes Yes
 
Two or more class names Buggy Yes Yes Yes Yes Yes
  • 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
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
Selects an element that is a child of another element No Yes Yes Yes Yes Yes
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.
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
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
Selects an element with a certain attribute No Yes Yes Yes Yes Yes
Selects an element with a certain attribute value No Yes Yes Yes Yes Yes
Selects an element with an attribute that includes a certain value; space-separated No Yes Yes Yes Yes Yes
Selects an element with a certain attribute that starts with a certain value No Yes Yes Yes Yes Yes
Selects an element with a certain attribute that ends with a certain value No Yes Yes Yes Yes Yes
Selects an element with a certain attribute that contains a certain value; not necessarily space-separated No Yes Yes Yes Yes Yes
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
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
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
To generate content before and after an element No Yes Yes Yes Yes Yes
The first first letter of an element Yes Yes Almost Almost Almost
  • 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.
The first line of an element Yes Yes Yes Yes Yes
Text selected by the user. No Yes -moz- Yes Yes Yes

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
An element in an active state. Incomplete Almost Yes Yes Yes Yes
  • 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.
An element in a hovered state. Incomplete Yes Yes Yes Yes Yes
  • IE 5/6 supports it only on links.
Unvisited link Yes Yes Yes Yes Yes
Negation of a selector No Yes Yes Yes Yes Yes
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 link Security issue Yes Yes Yes Security issue Yes Yes

There’s a security issue with :visited. See the page for more details.

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

Structural 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
Empty elements No Yes Yes Yes Yes Yes
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.
The first element of its type. No Yes Yes Yes Yes Yes
An element that is the last child of its parent No Yes Yes Yes Yes Yes
The last element of its type. 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
Select elements according to a formula No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
No Yes Yes Yes Yes Yes
Select elements according to a formula No Yes Yes Yes Yes Yes
An element that is the only child of its parent No Yes Yes Yes Yes Yes
The only element of its type. No Yes Yes Yes Yes Yes
The root element, or initial containing block. 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

UI state pseudo-classes

See also the CSS3 User Interface spec.

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 elements (checkboxes or radios) No Yes Yes No Yes Yes Yes
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 form fields No Yes Yes Yes Yes Yes
Non-disabled form fields No Yes Yes Yes Yes Yes
Form fields that have the keyboard focus No Yes Yes Yes Yes Yes
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
Form field with value that does not conform to pattern No Yes Yes Yes Yes Yes
Non-required form fields No Yes Yes Yes Yes Yes
Form fields with values that are not in range (numbers) No No Yes Yes Yes
Readonly form fields No No Yes Yes Yes
Non-readonly form fields No No Yes Yes Yes
Required form fields No Yes Yes Yes Yes Yes
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:

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.