Appendix A. CSS Selectors and Specificity

CSS Selectors Level 3

Pattern

Meaning

Specificity and examples

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 ...

Get Mobile HTML5 now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.