Mobile HTML5 (2013)

Universal Selector

The universal selector has no weight in terms of specificity.

0-0-0

*

Matches any element.

* {}

Type selector

Type or element selectors have the lowest specificity.

0-0-1

E

Matches elements of type E.

em, strong

Class selectors

0-1-0

myClass

Matches all elements whose class list contains the class myClass.

.myClass

ID selectors

1-0-0

#myId

Matches the element that has an ID equal to myId.

#myId

Combinators

Combinators, including >, + and ~, do not impact specificity.

0-0-0

E F

Matches elements F that are descendants (direct children or not) of element E.

ol li

tr td

E > F

Matches elements F that are direct children of element E.

ol > li

thead > tr

E + F

Matches the element F that comes immediately after element E, if E and F share the same parent.

h1 + p

tr.current + tr

E ~ F

Matches all elements F that come after element E that share the same parent.

li:first-child ~ li

Attribute selectors

Attribute selectors have the same specificity as the class selector.

0-1-0

E[attr]

Matches elements E that have an attr attribute, no matter the value of the attribute.

input[type]

E[attr="val"]

Matches elements E whose attr attribute value is exactly equal to val.

input[type="checkbox"]

E[attr~="val"]

Matches elements E whose attr attribute value is a list of whitespace-separated values, one of which is exactly equal to val.

img[alt~="figure"]

E[attr^="val"]

Matches elements E whose attr attribute value begins exactly with the string val.

a[href^="mailto:"]

E[attr$="val"]

Matches elements E whose attr attribute value ends exactly with the string val.

a[href$=".pdf"]

E[attr*="val"]

Matches elements E whose attr attribute value contains the substring val.

a[href*="://"]

a[href*="twitter.com"]

E[attr|="val"]

Matches elements E whose attr attribute equals val or starts with val followed by a hyphen.

html[lang|="en"]

Structural pseudoclasses

Pseudoclasses have the same specificity as a class selector.

0-1-0

E:first-child

Matches element E that is the first child of its parent.

h1:first-child

E:last-child

Matches element E that is the last child of its parent.

p:last-child

E:only-child

Matches element E if and only if E is the only child of its parent.

li:only-child

E:first-of-type

Matches element E that is the first E of its type, not necessarily the first child.

li:first-of-type

E:last-of-type

Matches element E that is the last E of its type, not necessarily the last child.

li:last-of-type

E:only-of-type

Matches element E if E is the only child of its parent of that type, though not necessarily the parent’s only child.

h1:only-of-type

E:nth-child(n)

Matches element(s) E that are the nth children of their parent, where n can be an integer, an equation matching an+b, where a is the multiplier and b the offset, or the key terms even or odd.

tr:nth-child(odd)

E:nth-last-child(n)

Matches element(s) E that are the nth child of their parent, counting from the last child and going backward.

li:nth-last-child(5)

E:nth-of-type(n)

Matches element(s) E that are the nth siblings (have the same parent) of their type

th:nth-of-type(2)

E:nth-last-of-type(n)

Matches element(s) E that are the nth sibling of its type, counting from the last E.

E:root

Matches element E if it is the root of the document, which is always the HTML element in our HTML documents.

html:root

E:empty

Matches element E if E is empty, having no children other than a comment. If the element contains a single space, it is not empty.

p:empty

Link, user-action, and UI element state pseudoclasses

These pseudoclasses triggered by state have the same specificity as a class selector.

0-1-0

E:link

E:visited

The link pseudoclasses match hyperlinks E when the target has not yet been visited (:link) or has already been visited (:visited).

a:link

a:visited

E:active

E:hover

E:focus

The user action pseudoclasses match element(s) E during certain user actions, when the element is active, hovered, or has focus.

a:active

img:hover

input:focus

E:enabled

E:disabled

Matches user interface element E, which is enabled or disabled.

input:enabled

select:disabled

E:checked

Matches a user interface element E, such as a radio button or checkbox, which is checked.

input[type="radio"]:checked

E:default

Matches element E if it is the default among a set of similar elements, such as the options default selected on page load.

option:default

E:valid

E:invalid

Matches element E when the element’s value is valid or invalid, such as matching or not matching an input’s pattern attribute or data type.

input:valid

input:invalid

E:in-range

E:out-of-range

Matching element E if element E has a range limitation, such as a range input type in number input type with min/max values, and that value is either in :in-range or :out-of-range.

input:in-range

input:out-of-range

E:required

E:optional

Matches form field element E if it is :required or :optional.

input:required

input:optional

E:read-only

E:read-write

Matches element E if its contents are not user alterable (:read-only), or if its contents are user alterable (:read-write), such as text-input fields.

input:read-only

input:read-write

Target and Language

E:target

An E element being the target of the referring URI.

div:target

E:lang(fr)

An element of type E in language fr (the document language specifies how language is determined).

p:lang(fr)

Negation

?-?-?

(depends on parameter)

E:not(exclude)

Matches all the E elements that do not match the selector exclude. The :not has no weight in terms of specificity, rather the contents of the argument add to the weight.

div:not([class])

.foo:not(div)

Pseudoelements

0-0-1

E::first-line

Matches the first formatted line of element E.

p::first-line

E::first-letter

Matches the first formatted letter of element E.

p::first-letter

E::before

Generates content before the content of element E, and matches that content.

div::before

E::after

Generates content after the content in element E, and matches that content.

div::after

E::selection

Not currently in the specifications, it matches the content of element E that is currently selected or highlighted by the user.

*::selection

*::-moz-selection

*

::after

:empty

E

::first-letter

:not()

.class

::first-line

:target

#id

E[attribute^=value]

:enabled

E F

E[attribute$=value]

:disabled

E > F

E[attribute*=value]

:checked

E + F

E ~ F

:indeterminate^[a^]

E[attribute]

:root

:default

E[attribute=value]

:last-child

:valid

E[attribute~=value]

:only-child

:invalid

E[attribute|=value]

:nth-child()

:in-range

:first-child

:nth-last-child()

:out-of-range

:link^[b^]

:first-of-type

:required

:visited

:last-of-type

:optional

:lang()

:only-of-type

:read-only

::before^[c^]

:nth-of-type()

:read-write

::selection^[d^]

:nth-last-of-type()

^[a^] The last nine selectors are part of CSS Basic User Interface Module Level 3 (CSS3 UI) specification, and are found in the CSS Selectors Level 4 specification.

^[b^] Some browsers have limited support for :link and :visited for security reasons.

^[c^] Use single colon notation for support in older IE.

^[d^] Not in the CSS Selectors level 3 specification, but fully supported. Prefix with -moz- for Firefox.

Basic Selectors

*

Universal selector matches all elements.

2

E

Type (tag name) selector matches elements of type E.

1

.someClass

Class selectors match elements having the class listed, someClass in this case.

1

#myID

ID Selector matches the element with ID equal to myID.

1

Combinators

E F

Descendant combinator, matches element F that is a descendant of element E.

1

E > F

Child combinator, matches element F that is a child of element E.

2

E + F

Next sibling combinator, matches element F that is immediately preceded by element E.

2

E ~ F

Following sibling combinator, matches elements F that are preceded by element E.

3

E /foo/ F

Reference combinator, matches element F that is ID-referenced by element E’s foo attribute (would match the form element F that was referenced by label E’s foo attribute).

4

E! > F

Determining the subject of a selector +Child combinator, matching element E that is the parent of element F.

4

Attribute selectors

E[foo]

Matches element E that has a foo attribute.

2

E[foo="bar"]

Matches element E whose foo attribute value is exactly equal to bar, case sensitivity depends on case sensitivity of attribute value.

2

E[foo="bar" i]

Matches element E whose foo attribute value is exactly equal to any case permutation of bar.

4

E[foo~="bar"]

Matches element E whose foo attribute value is a list of whitespace-separated values, one of which is exactly equal to bar.

2

E[foo^="bar"]

Matches element E whose foo attribute value begins exactly with the string bar.

3

E[foo$="bar"]

Matches element E whose foo attribute value ends exactly with the string bar.

3

E[foo*="bar"]

Matches element E whose foo attribute value contains the substring bar.

3

E[foo|="en"]

Matches element E whose foo attribute value is a hyphen-separated list of values beginning with en.

2

Structural pseudoclasses

E:root

Matches element E that is the root of the document.

3

E:empty

Matches element E that has no children (not even text nodes).

3

E:blank

Matches element E that has no content except maybe whitespace.

4

E:first-child

Matches element E that is the first child of its parent.

2

E:last-child

Matches element E that is the last child of its parent.

3

E:only-child

Matches element E that is the only child of its parent.

3

E:first-of-type

Matches element E that is the first sibling of its type.

3

E:last-of-type

Matches element E that is the last sibling of its type.

3

E:only-of-type

Matches element E that is the only sibling of its type.

3

E:nth-child(n)

Matches element E that is the nth child of its parent.

3

E:nth-last-child(n)

Matches element E that is the nth child of its parent, counting from the last one.

3

E:nth-of-type(n)

Matches element E that is the nth sibling of its type.

3

E:nth-last-of-type(n)

Matches element E that is the nth sibling of its type, counting from the last one.

3

E:nth-match(n of selector)

Matches element E that is the nth sibling matching selector.

4

E:nth-last-match(n ofselector)

Matches element E that is the nth sibling matching selector, counting from the last one.

4

Grid-Structural pseudoclasses

F || E

Matches element E that represents a cell in a grid/table belonging to a column represented by element F.

4

E:nth-column(n)

Matches element E that represents a cell belonging to the nth column in a grid/table.

4

E:nth-last-column(n)

Matches element E that represents a cell belonging to the nth column in a grid/table, counting from the last one.

4

Link pseudoclass

E:any-link

Matches element E being the source anchor of a hyperlink.

4

E:link

Matches element E being the source anchor of a hyperlink of which the target has not already been visited.

1

E:visited

Matches element E being the source anchor of a hyperlink of which the target has already been visited.

1

E:local-link

Matches element E being the source anchor of a hyperlink of which the target is within the current document.

4

E:local-link(0)

Matches element E being the source anchor of a hyperlink of which the target is within the current domain, though not necessarily in the current document.

4

E:target

The target pseudoclass matches element E, which is the target of the referring URL.

3

User interface pseudoclasses

E:active

Matches element E that is in an activated state.

1

E:hover

Matches element E that is under the cursor, or that has a descendant under the cursor.

2

E:focus

Matches element E that has user input focus.

2

E:enabled

Matches user interface element E that is enabled.

3

E:disabled

Matches user interface element E that is disabled.

3

E:read-only

Matches user interface element E that is not editable.

3/4^[a^]

E:read-write

Matches user interface element E that is editable, and element E that has the contenteditable attribute set to true.

3/4

E:placeholder-shown

Matches an input-control element E that is currently showing placeholder text.

3/4

E:default

Matches the user interface element E that was the default option selected.

3/4

E:checked

Matches the user interface element E that is checked or selected, such as a checked checkbox or selected radio button.

3

E:indeterminate

Matches the user interface element E that is in an indeterminate state (neither checked nor unchecked).

4

E:valid

Matches a user-input element E that is valid based on the lack of validity constraints (always valid) or on the content matching the validity constraints.

3/4

E:invalid

Matches a user-input element E that is invalid, as when the contents do not match the validity constraints of the attributes.

3/4

E:in-range

Matches a user-input element E whose value is in-range, such as within the min/max bounds.

3/4

E:out-of-range

Matches a user-input element E whose value is out-of-range, such as outside the min/max bounds.

3/4

E:required

Matches a user-input element E that is requires input (can not be left blank).

3/4

E:optional

Matches a user-input element E that does not require input (can be left blank).

3/4

Drag-and-drop pseudoclasses

E:active-drop

Matches element E that will receive the item currently being dragged.

E:valid-drop

Matches element E that could receive the item currently being dragged.

E:invalid-drop

Matches element E that cannot receive the item currently being dragged, but could receive some other item.

Matching, negation, and scope pseudoclasses

E:not(s1, s2)

Matches elements E that do not match either compound selector s1 or compound selector s2. In CSS Level 3, only a single simple selector could be passed.

3/4

E:matches(s1,s2)

Matches elements E that match compound selector s1 and/or compound selector s2.

4

E:scope

The scope pseudoclass matches element E being a designated reference element.

4

Language and direction pseudoclasses

E:dir(ltr)

E:dir(rtl)

Matches elements E with which left-to-right or left-to-right directionality based on the document language.

4

E:lang(zh, *-hant)

Matches elements E tagged as being either in Chinese (any dialect or writing system) or otherwise written with traditional Chinese characters. In CSS Selectors Level 2, the :lang() pseudoclass took only the first parameter.

2/4

Time-dimensional pseudoclasses

E:current

Matches element E that is currently presented in a time-dimensional canvas.

4

E:current(s)

Matches element E that is the deepest :current element that matches selector s.

4

E:past

Matches element E that is in the past in a time-dimensional canvas.

4

E:future

Matches element E that is in the future in a time-dimensional canvas.

4

^[a^] Added as part of CSS Basic User Interface Module Level 3 (CSS3 UI) specification, introduced into the CSS Selectors specification with Level 4.