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

Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
p Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
p.test Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
p#test Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
p span Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
Selects all elements Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
Two or more class names Yes Yes Yes Yes Yes Yes Yes Yes Yes

Combinators

Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
Selects an element that is a child of another element Yes Yes Yes Yes Yes Yes Yes Yes Yes
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.
Selects an element that is a general next sibling of another element Yes Yes Yes Yes Yes Yes Yes Yes Yes

Attribute selectors

Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
Selects an element with a certain attribute Yes Yes Yes Yes Yes Yes Yes Yes Yes
Selects an element with a certain attribute value Yes Yes Yes Yes Yes Yes Yes Yes Yes
Selects an element with an attribute that includes a certain value; space-separated Yes Yes Yes Yes Yes Yes Yes Yes Yes
Selects an element with a certain attribute that starts with a certain value Yes Yes Yes Yes Yes Yes Yes Yes Yes
Selects an element with a certain attribute that ends with a certain value Yes Yes Yes Yes Yes Yes Yes Yes Yes
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
Attribute value starts with "value" or "value-" Yes Yes Yes Yes Yes Yes Yes Yes Yes
Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Pseudo-elements

Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
To generate content before and after an element Yes Yes Yes Yes Yes Yes Yes Yes Yes
 
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.
The first line of an element Yes Yes Yes Yes Yes Yes Yes Yes Yes
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

Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
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.
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.
Unvisited link Yes Yes Yes Yes Yes Yes Yes Yes Yes
Negation of a selector Yes Yes Yes Yes Yes Yes Yes Yes Yes
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 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.
Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Structural pseudo-classes

Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
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.
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.
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.
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.
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.
Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
Select elements according to a formula Yes Yes Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes Yes Yes Yes Yes
Yes Yes Yes Yes Yes Yes Yes Yes Yes
Select elements according to a formula Yes Yes Yes Yes Yes Yes Yes Yes Yes
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.
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.
The root element, or initial containing block. Yes Yes Yes Yes Yes Yes Yes Yes Yes
Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

UI state pseudo-classes

See also the CSS3 User Interface spec.

Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
Checked elements (checkboxes or radios) Yes No Yes No Yes No No Yes No Yes No Yes No Yes No
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 form fields Yes Yes Yes Yes Yes Yes Yes Yes Yes
Non-disabled form fields Yes Yes Yes Yes Yes Yes Yes Yes Yes
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.

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.
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.
Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And
Non-required form fields Yes Yes Yes Buggy Yes Yes Yes Yes No Yes Yes
  • Opera Mini gives all form fields the :optional styles.
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.
Readonly form fields Yes Yes Yes Yes Yes No Yes Yes No No
Non-readonly form fields Yes Yes Yes Yes Yes No Yes Yes No No
Required form fields Yes Yes Yes Buggy Yes Yes Yes Yes No Yes Yes
  • Opera Mini gives all form fields the :optional styles.
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.
Selector iOS Android Chrome Opera BlackBerry Nokia UC Nintendo Dolphin Tizen One IE Firefox
6 7 2 3 4 18 29 Mini Mob 12 Mob 15 6 7 PB 10 Xpress MeeGo Anna Belle 8 9 9 10 OS And

Tested browsers

Mobile browser test array 1.1.1; October 2013

iOS 6
WebKit 536
Default browser on iPhone 4S with iOS 6.1.3
iOS 7
WebKit 537
Default browser on iPad 2 with iOS 7.0
Android 2
WebKit 533
Default browser on HTC Legend, Android 2.2
Default browser on LG Optimus something, Android 2.2
Default browser on Samsung Galaxy Pocket, Android 2.3.6
Android 3
WebKit 534
Default browser on Packard Bell tablet, Android 3.2.1
Android 4
WebKit 534
Default browser on Samsung Galaxy Note I, Android 4.0.3
Default browser on Sony Xperia S, Android 4.0.4
Default browser on Xiaomi M2, Android 4.1.1
Default browser on Huawei C8813, Android 4.1.1
Default browser on Samsung Galaxy S3, Android 4.1.2
Default browser on HTC One X, Android 4.2.2
Chrome 18
WebKit 535
Default browser on Samsung Galaxy S4, Android 4.2
On Sony Xperia S, Android 4.0.4. This is a downloaded version from Google
It will be interesting to see if Samsung’s purported Chrome 18 is really the real Chrome 18.
Chrome 29
Blink (Chromium 29)
On HTC One X, Android 4.2.2
On Nexus 7, Android 4.3
Opera Mini
Presto
Proxy browser
7.0.5 on iPad 2, iOS 7.0
7.1 on BlackBerry 9800 (OS6)
7.1 on Nokia PureView 808, Symbian Belle
7.5 on Samsung Galaxy Note I, Android 4.0.3
Opera Mobile 12
Presto
12.00 on Nokia E7, Symbian Anna
12.10 on Samsung Galaxy Pocket, Android 2.3.6
Opera Mobile 15
Blink (Chromium 28)
On Sony Xperia S, Android 4.0.4
On Nexus 7, Android 4.3
BlackBerry 6
WebKit 534
Default browser on BB Torch 9800 (OS6)
BlackBerry 7
WebKit 534
Default browser on BB Torch 9810 (OS7)
BlackBerry PB
WebKit 536
Default browser on PlayBook with OS 2.1.0
BlackBerry 10
WebKit 537
Default browser on BlackBerry Z10 (BB OS 10.1)
This device has 1GB of internal memory instead of the customary 2GB, which may matter in performance tests.
Xpress
Gecko 20100401; this version was used for some Firefoxes from 3 to 4.
Proxy browser
3.2 on the Nokia Asha 311, S40.
This browser used to be called Ovi. Nokia developed it because it saw how succesful Opera was on Nokia’s own devices.
MeeGo
WebKit 534
Default browser on Nokia N950, MeeGo Harmattan 1.2
Originally slated as Symbian’s successor, MeeGo was ousted in favour of Windows Phone. Some devices were sold, however, and a Finnish company is trying to re-start MeeGo under the name Sailfish. Also, rumour has it that Nokia is quietly hiring back ex-MeeGo people, so a Nokia-based restart is not entirely impossible.
Anna
WebKit 533
Default browser (7.3) on Nokia E7, Symbian Anna
The next-to-last Symbian build. I don’t think it was the prime Symbian build for long; it was replaced by Belle fairly soon. But it’ll be in some people’s pockets.
Belle
WebKit 535
Default browser (8.3) on Nokia PureView 808, Symbian Belle FP2
The most recent Symbian build.
UC
WebKit 534
UC 8.5.1 on Xiaomi M2 (Android 4.1.1)
UC 9.2.3 on Huawei C8813 (Android 4.1.1)
The largest Chinese browser. I’m testing the full variant, not the proxy. These browsers were pre-installed (next to Android WebKit; don’t ask me why).
Nintendo
WebKit 536
Nintendo browser 2.0.0 on Wii U 4.0.0
Supposed to be based on NetFront.
Dolphin
WebKit 534
Beta 1.3.1 on Sony Xperia S, Android 4.0.4.
Independent full browser for Android. The non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
QQ One
WebKit 533
4.2.2 on HTC One X, Android 4.2.2
This is the downloadable, international browser TenCent created.
Tizen
WebKit 537
Default browser on Ref.Device-PQ by Samsung; Tizen 2.2
Tizen is an OS jointly being developed by Samsung and Intel. I expect Samsung to start producing devices this year, and it will get a few percent of market share.
IE9
Trident
Default browser on Nokia Lumia 800, Windows Phone 7.5.
IE10
Trident
Default browser on Nokia Lumia 820, Windows Phone 8.0.
Firefox OS
Gecko 18
Geekphone/Telefónica (Peak and/or qcom); Boot2Gecko 1.0.1.0-prerelease
Firefox Android
Gecko 23
23 on HTC One X, Android 4.2.2

Browsers by WebKit version:

533
Android 2
Anna
UC
QQ 2.0
One
534
Android 3 and 4
BB 6 and 7
MeeGo
Dolphin
535
Belle
Chrome 18
536
iOS6
BlackBerry PlayBook
NetFront
537
iOS7
BlackBerry 10
Tizen