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 mobile table. See also the desktop table.

Last major update on 1 October 2013.

I'm writing a CSS book.

Basics

[an error occurred while processing this directive] [an error occurred while processing this directive]
Element selector
p 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
Class selector
p.test 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
ID selector
p#test 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
Descendant selector
p span 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
* selector
Selects all elements 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
Multiple classes
Two or more class names 		Yes Yes Yes Yes Yes Yes Yes Yes Yes

Combinators

[an error occurred while processing this directive] [an error occurred while processing this directive]
> selector
Selects an element that is a child of another element 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
+ selector
Selects an element that is a next sibling of another element 		Yes Yes Yes Yes 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.
  • UC applies the style to all paragraphs.
~ selector
Selects an element that is a general next sibling of another element 		Yes Yes Yes Yes Yes Yes Yes Yes Yes

Attribute selectors

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
[attr] selector
Selects an element with a certain attribute 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
[attr=value] selector
Selects an element with a certain attribute value 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
[attr~=value] selector
Selects an element with an attribute that includes a certain value; space-separated 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
[attr^=value] selector
Selects an element with a certain attribute that starts with a certain value 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
[attr$=value] selector
Selects an element with a certain attribute that ends with a certain value 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
[attr*=value] selector
Selects an element with a certain attribute that contains a certain value; not necessarily space-separated 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
[attr|=value]
Attribute value starts with "value" or "value-" 		Yes Yes Yes Yes Yes Yes Yes Yes Yes

Pseudo-elements

[an error occurred while processing this directive] [an error occurred while processing this directive]
:before and :after
To generate content before and after an element 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
:first-letter
The first letter of an element 		Almost Almost Almost Yes Almost Almost Yes Almost Almost Yes Yes
  • WebKit-based browsers leave the first 'T' at the start of the paragraph when you add text.
  • Opera Mobile leaves out the 'T' of the second and subsequent sentences when you do the dynamic test.
  • NetFront and Samsung Pocket do not apply the :first-line styles to the first letter.
:first-line
The first line of an element 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
::selection
Text selected by the user. 		No Samsung Yes No Yes Yes No Yes Untestable ut Yes ut Yes ut ut Yes ut -moz-
Untestable / UT
Browser does not support the selecting of text
  • Samsung Android WebKits support it; others don’t.

Pseudo-classes

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
:active
An element in an active state. 		No No No Yes No Yes Yes No No No Alternative No No Yes Yes

Styles should be applied ontouchstart and removed ontouchend.

To be honest, I don't see a lot of use for this selector on touchscreen devices.

  • Nintendo supports it, but only when you hold the element for a while. A simple tap is not enough.
:hover
An element in a hovered state. 		Special Yes Yes Special Yes Desktop Yes Yes Yes Yes Desktop Yes

Normally the :hover styles are applied when the user touches the element, and removed when the user touches another element.

Special
Browser implements styles (and their removal) only on touchable elements; i.e. links, form fields, or elements with an explicit onclick event handler.
Desktop
Browser removes styles when touch ends; this is more in line with what the desktop browsers do.
:link
Unvisited link 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
:not
Negation of a selector 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
:target
Element that is a target of a hash (page.html#testHash) 		Yes Yes Yes Yes Yes Yes Yes Incomplete 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.
  • Symbian Anna supports it, but the Back button doesn’t take you back to the un-hashed URL, but to the previous page.
IE10: see above
:visited
Visited link 		Yes se Yes Yes Incomplete se Yes Yes Yes se Yes Yes Yes No Yes

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

se
Security issue active
  • The Chrome 29 on Nexus 7 (Android 4.3) does not show the visited link in green, while it should. The Chrome 29 on HTC One (Android 4.2) does everything right.

Structural pseudo-classes

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
:empty
Empty elements 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
Static
Browser doesn’t update the styles when content is added to the element.
:first-child
An element that is the first child of its parent 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
Static
Browser doesn’t update the styles when elements are added dynamically.
:first-of-type
The first element of its type. 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
Static
Browser doesn’t update the styles when elements are added dynamically.
:last-child
An element that is the last child of its parent 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
  • Symbian 9.2 and S40 apply the :last-child styles to the :first-child.
:last-of-type
The last element of its type. 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
Static
Browser doesn’t update the styles when elements are added dynamically.
:nth-child()
Select elements according to a formula 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
:nth-last-child()
 Yes Yes Yes Yes Yes Yes Yes Yes Yes
:nth-last-of-type()
 Yes Yes Yes Yes Yes Yes Yes Yes Yes
:nth-of-type()
Select elements according to a formula 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
:only-child
An element that is the only child of its parent 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
  • Symbian 9.2 and S40 apply the :only-child styles to the :first-child and don’t remove the styles when the :only-child gets a sibling.
:only-of-type
The only element of its type. 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
  • S40 applies the :only-of-type styles to the :first-of-type.
:root
The root element, or initial containing block. 		Yes Yes Yes Yes Yes Yes Yes Yes Yes

UI state pseudo-classes

See also the CSS3 User Interface spec.

[an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive]
:checked
Checked elements (checkboxes or radios) 		Yes No Yes No Yes No No Yes No Yes No Yes No Yes No
:default
Default choices in select boxes or groups of radio buttons 		No No No No Incomplete No No No No No No

Tested on radio buttons and select boxes.

  • Opera doesn’t support it on select boxes.
:disabled
Disabled form fields 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
:enabled
Non-disabled form fields 		Yes Yes Yes Yes Yes Yes Yes Yes Yes
:focus
Form fields that have the keyboard focus 		Yes Yes Yes No Yes Yes No Yes No Yes Yes Yes

Sidenote: Sony Android 4 shows the label text in focused form fields. I think this is an excellent idea that deserves to be copied.
:in-range
Form fields with values that are in range (numbers) 		Yes No Yes Yes No Yes No Yes No Yes Yes No Yes
  • The Sony Android 4, as well as UC, wait until the focus is removed from the form field to apply the styles. The others do it directly when a number is typed.
:invalid
Form field with value that does not conform to pattern 		Yes No Yes Yes Buggy Yes Yes No Yes No Yes Yes No Yes Yes
  • The Sony Android 4 waits until the focus is removed from the form field to apply the styles. The others do it directly when a number is typed.
  • Opera Mini always follows the :valid styles even if the value is invalid.
:optional
Non-required form fields 		Yes Yes Yes Buggy Yes Yes Yes Yes No Yes Yes
  • Opera Mini gives all form fields the :optional styles.
:out-of-range
Form fields with values that are not in range (numbers) 		Yes No Yes Yes No Yes No Yes No Yes Yes No Yes
  • The Sony Android 4, as well as UC, wait until the focus is removed from the form field to apply the styles. The others do it directly when a number is typed.
:read-only
Readonly form fields 		Yes Yes Yes Yes Yes No Yes Yes No No
:read-write
Non-readonly form fields 		Yes Yes Yes Yes Yes No Yes Yes No No
:required
Required form fields 		Yes Yes Yes Buggy Yes Yes Yes Yes No Yes Yes
  • Opera Mini gives all form fields the :optional styles.
:valid
Form field with value that conforms to pattern 		Yes No Yes Yes Buggy Yes Yes No Yes No Yes Yes No Yes Yes
  • The Sony Android 4 waits until the focus is removed from the form field to apply the styles. The others do it directly when a number is typed.
  • Opera Mini gives all form fields the :valid styles.

Tested browsers

[an error occurred while processing this directive]