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

CSS Selector Cheat Sheet

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

CSS Selector Specificity

CSS Selectors Level 4

Selector	Definition	Level
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.