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 16 February 2013.

Even though the Symbian Anna browser supports web standards fairly well, it crashed three times during my testing.

Basics

Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Element selector `p`	Yes		Yes				Yes		Yes				Yes					Yes					Yes
Element selector `p`
Class selector `p.test`	Yes		Yes				Yes		Yes				Yes					Yes					Yes
Class selector `p.test`
ID selector `p#test`	Yes		Yes				Yes		Yes				Yes					Yes					Yes
ID selector `p#test`
Descendant selector `p span`	Yes		Yes				Yes		Yes				Yes					Yes					Yes
Descendant selector `p span`
* selector Selects all elements	Yes		Yes				Yes		Yes				Yes					Yes					Yes
* selector Selects all elements
Multiple classes Two or more class names	Yes		Yes				Yes		Yes				Yes					Yes					Yes
Multiple classes Two or more class names

Combinators

Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
> selector Selects an element that is a child of another element	Yes		Yes				Yes		Yes				Yes					Yes					Yes

+ selector Selects an element that is a next sibling of another element	Yes		Yes				Yes		Yes				Static		Yes			Yes				Buggy	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				No	Yes				Yes					Yes

Attribute selectors

Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
[attr] selector Selects an element with a certain attribute	Yes		Yes				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	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

[attr^=value] selector Selects an element with a certain attribute that starts with a certain value	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

[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

[attr\|=value] Attribute value starts with "value" or "value-"	Yes		Yes				Yes		Yes				Yes					Yes					Yes
	I did not test IE5-6, but assume they don’t support it.
Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox

Pseudo-elements

Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
:before and :after To generate content before and after an element	Yes		Yes				Yes		Yes				Yes					Yes					Yes

:first-letter The first letter of an element	Almost		Almost				Yes	Almost	Almost				Almost			Yes	Almost	Almost			Buggy	No	Yes
:first-letter The first letter of an element	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 does 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
:first-line The first line of an element
::selection Text selected by the user.	No		No			Yes	No	Yes	Yes	No			Untestable			No	Untestable	No	Untestable			Yes	Untestable	-moz-
::selection Text selected by the user.	Untestable Browser does not support the selecting of text

Pseudo-classes

Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
:active An element in an active state.	No		No				No		Yes				Yes	No				No					No	Yes
:active An element in an active state.	Styles should be applied ontouchstart and removed ontouchend. The Symbian 9.2 device is not a touchscreen and has a pseudo-cursor, so it acts like a desktop browser.
:hover An element in a hovered state.	Special		Yes				Special	Yes	Desktop				Desktop	Yes		No	Yes	Yes					Yes
:hover An element in a hovered state.	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. The Symbian 9.2 device is not a touchscreen and has a pseudo-cursor, so it acts like a desktop browser.
:link Unvisited link	Yes		Yes				Yes		Yes				Yes					Yes					Yes
:link Unvisited link
:not Negation of a selector	Yes		Yes				Yes		Yes				Yes					Yes				No	Yes
:not Negation of a selector
:target Element that is a target of a hash (`page.html#testHash`)	Yes		Yes				Yes		Yes				Yes			No	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.
:visited Visited link	Yes		se	Yes			No	se	Yes				se		Yes	No	Yes	Yes			se	Yes	Yes
:visited Visited link	There’s a security issue with `:visited`. See the page for more details. se Security issue active
Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox

Structural pseudo-classes

Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
:empty Empty elements	Yes		Yes				Yes		Yes				Static		Yes			Yes					Yes
:empty Empty elements	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				Static		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				No	Static	Yes			Yes					Yes
:first-of-type The first element of its type.	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				Buggy		Yes			Yes					Yes
:last-child An element that is the last child of its parent	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				No	Static	Yes			Yes					Yes
:last-of-type The last element of its type.	Static Browser doesn’t update the styles when elements are added dynamically.
Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
:nth-child() Select elements according to a formula	Yes		Yes				Yes		Yes				No		Yes			Yes					Yes
:nth-child() Select elements according to a formula
:nth-last-child()	Yes		Yes				Yes		Yes				No		Yes			Yes					Yes
:nth-last-child()
:nth-last-of-type()	Yes		Yes				Yes		Yes				No		Yes			Yes					Yes
:nth-last-of-type()
:nth-of-type() Select elements according to a formula	Yes		Yes				Yes		Yes				No		Yes			Yes					Yes
:nth-of-type() Select elements according to a formula
:only-child An element that is the only child of its parent	Yes		Yes				Yes		Yes				Static and buggy		Yes			Yes					Yes
:only-child An element that is the only child of its parent	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				No	Buggy	Yes			Yes					Yes
:only-of-type The only element of its type.	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
:root The root element, or initial containing block.
Selector	iOS		Android			Chr	Opera		BlackBerry				Nokia					Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
Selector	5	6	2	3	4	Chr	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox

UI state pseudo-classes

Selector	iOS	Android	Chr	Opera	BlackBerry	Nokia	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
5	6	2	3	4	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo
: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	Incomplete	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	No	Yes	Yes	Yes

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

:focus Form fields that have the keyboard focus	Yes	Yes	No	Yes	Yes	Yes	Don't know	Yes	No	Yes	Yes	No	Yes
On S40 the UI gets in the way of the test. It will also get in the way of your :focus styles. The same goes for the Samsung Galaxy Note. Sidenote: iOS5 doesn’t support labels. iOS6 does. One and Tizen don’t.
:in-range Form fields with values that are in range (numbers)	Yes	No	Yes	No	Yes	No	Yes	No	Yes	No	No	Yes

:invalid Form field with value that does not conform to `pattern`	Yes	No	Yes	No	Yes	Yes	No	Yes	Yes	No	Yes	No	Yes

Selector	iOS	Android	Chr	Opera	BlackBerry	Nokia	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
5	6	2	3	4	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo
:optional Non-required form fields	Yes	Yes	Buggy	Yes	Yes	No	Yes	No	Yes	Yes	No	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	No	Yes	No	Yes	No	Yes	No	No	Yes

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

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

:required Required form fields	Yes	Yes	No	Yes	Yes	No	Yes	No	Yes	Yes	No	Yes

:valid Form field with value that conforms to `pattern`	Yes	No	Yes	Buggy	Yes	Yes	No	Yes	Yes	No	Yes	No	Yes
Opera Mini gives all form fields the :valid styles.
Selector	iOS	Android	Chr	Opera	BlackBerry	Nokia	Dolphin	One	Tizen	NetFront	UC	IE9	Firefox
5	6	2	3	4	Mini	Mobile	6	7	PB	10	Symbian 9.2	S40	Symbian Anna	Xpress	MeeGo

Tested browsers

Mobile browser test array 1.0; February 2013

All these browsers are WebKit-based, with the exception of both Operas (still Presto), IE9 (Trident), and Firefox and Nokia Xpress (Gecko).

Opera Mini and Nokia Xpress are proxy browsers.

iOS 5: Default browser on iPad 2 with iOS 5.1.1 (WebKit 534)
iOS 6: Default browser on iPhone 4S with iOS 6.1.1 (WebKit 536)
Android 2: Default browser on HTC Legend, Android 2.2 (WebKit 533); Default browser on LG Optimus something, Android 2.2 (WebKit 533); Default browser on Sony Xperia S, Android 2.3.7 (WebKit 533)
Android 3: Default browser on Packard Bell tablet, Android 3.2.1 (WebKit 534)
Android 4: Default browser on HTC One X, Android 4.1.1 (WebKit 534); Default browser on Samsung Galaxy Note I, Android 4.0.3 (WebKit 534)
Chrome: Chrome 18 on Samsung Galaxy Note I, Android 4.0.3, HTC One X, Android 4.1.1, and Nexus 7, Android 4.2.1 (WebKit 535)
Opera Mini: 7.5 on Samsung Galaxy Note I, Android 4.0.3; 7.1 on BlackBerry 9800 (OS6); 7.1 on Nokia E71 (SymbianOS/9.2); 7.0.5 on iPad 2, iOS 5.1.1
Opera Mobile: 12.10 on HTC One X, Android 4.1.1; 12.00 on Nokia E7 (Symbian Anna)
BlackBerry 6: Default browser on BB Torch 9800 (OS6) (WebKit 534)
BlackBerry 7: Default browser on BB Torch 9810 (OS7) (WebKit 534)
BlackBerry PB: Default browser on PlayBook with OS 2.1.0 (WebKit 536)
BlackBerry 10: Default browser on Dev Alpha A device with OS 10.0.9 (WebKit 537)
Symbian 9.2: Default browser on Nokia E71 SymbianOS/9.2 (WebKit 413)
S40: Default browser on Nokia X3-02, S40 (WebKit 420)
Symbian Anna: Default browser on Nokia E7 Symbian Anna (WebKit 533)
Xpress: This is Nokia’s Gecko-based proxy browser. I’m testing Xpress 1.0.12 on the Lumia 800 (Windows Phone 7), but it seems this is also the browser users of modern S40s such as the Asha range get. This browser used to be called Ovi.
MeeGo: Default browser on Nokia N950, MeeGo Harmattan 1.2 (WebKit 534)
Dolphin: Independent full browser for Android.
Dolphin Beta 1.3.1 on Samsung Galaxy Note I, Android 4.0.3 (WebKit 534). Note: the non-beta is a skin over the Android default browser. The beta uses their own WebKit port.
One: Formerly QQ browser by the Chinese company TenCent. Domestic competitor of UC.
3.5.2 on HTC One X, Android 4.1.1 (WebKit 534)
Tizen: Default browser on Lunchbox prototype by Intel, Tizen 2.0.0a3. (WebKit 537)
NetFront: NetFront, from the Japanese Access company, used to be big on proprietary Samsung and Sony Ericsson systems. It is now switching to WebKit from their own rendering engine. This is NetFront Life 2.3.1 on Sony Xperia S, Android 2.3.7 (WebKit 530)
UC: The largest Chinese browser (though I’m testing the full variant, not the proxy). UC 8.6.1 on Packard Bell tablet, Android 3.2.1. (WebKit 533)
IE9: Default browser on Nokia Lumia 800, Windows Phone 7.
Firefox: 18 on HTC One X, Android 4.1.1

General note on One, NetFront, and UC: the browsers I test are not particularly representative for the actual browsers that are used in the wild. Though some may be default browsers on Asian Android devices, most of them get their market share from being pre-installed on feature phones. These installs are unlikely to use the same rendering engine I’m testing. This is the best I can do, though — and all these browser vendors definitely want to expand their market via Android.

Browsers by WebKit version

413: Symbian 9.2
420: S40
530: NetFront
533: Android 2; Symbian Anna; UC
534: iOS5; Android 3 and 4; BlackBerry 6 and 7; MeeGo; Dolphin; One
535: Chrome
536: iOS6; BlackBerry PlayBook
537: BlackBerry 10; Tizen