CSS Selector and Selector API Quick Reference

CSS selector

Direct Selector
Selector	Meaning
tagName	All the tags
[tag].className	All the tags with a specific class
[tag]#id	The tag with a specific ID
*	Any element
Context Selector
Selector	Meaning
E F	Select element F that is a descendent of E
E > F	Select element F that is a direct child of E
E + F	Select element F that is an immediate sibling after E
E ~ F	Select element F that is a sibling after E
Pseudo Element Selector
Selector	Meaning
::first-letter	The first letter in text
::first-line	The first line of text
::before	The space immediately before the element (used with content property)
::after	The space immediately after the element (used with content property)
Link and Dynamic Pseudo Class Selector
Selector	Meaning
:link	The hyperlink when it first appears (used with a hyperlink tag)
:visted	The hyperlink that has been clicked (used with a hyperlink tag)
:target	A targeted anchor link (used with an anchor tag)
:hover	The element that is under the cursor
:active	The element that is being clicked
:focus	The element that has the focus
:enabled and :disabled	The element that is enabled or disabled
:checked	The element that is checked (used with a radio button or a checkbox)
Structural Pseudo Class Selector
Selector	Meaning
:root	The top level element of the document
:empty	The element that has no child
:only-child	The element that has no siblings
:first-child	The first child of some other element
:last-child	The last child of some other element
:nth-child(an + b)	The (an + b)-th child within its parent element. The index of the first child is 1. The use of a and b is: If a > 0, b > 0, all the children are divided into groups of size a, and it selects the b-th child within each group. Eg., :nth-child(n) selects all the children, :nth-child(n + 1) selects the second, the third, ..., the last children, :nth-child(3n) selects every third child; If a > 0, b < 0, all the children are divided into groups of size a, and it selects the \|b\|-th last child within each group. Eg., :nth-child(10n - 1) is the same as :nth-child(10n + 9); If a = 0, b != 0, it selects the b-th child (b > 0) or \|b\|-th last child (b < 0); If a < 0, only n-th child that satisfies condition an + b ≥ 0 will be selected; Eg., :nth-child(-n + 2) selects only the first child (n = 1) and the second child (n = 2); odd or even can be used. odd is the same as :nth-child(2n + 1), and even is the same as :nth-child(2n).
:nth-last-child(an + b)	The (an + b)-th last child within its parent element
:only-of-type	The element that has no sibling of the same type
:first-of-type	The first of its selector type within its parent element
:last-of-type	The last of its selector type within its parent element
:nth-of-type(<an + b)	The (an + b)-th of its selector type within its parent element
:nth-last-of-type(an + b)	The (an + b)-th of its last selector type within its parent element
Other Pseudo Class Selector
Selector	Meaning
:lang(l)	The element that has a specific language code l defined
:not(s)	Not confirming to selector s
Attribute Selector
Selector	Meaning
[attr]	The element that has a specific attribute
[attr = "value"]	The element that has a specific attribute with an exact value
[attr ~= "value"]	The element that has a specific attribute with an exact value in a space-seprated value list
[attr \|= "value"]	The element that has a specific attribute with an exact value in a hyphen-seprated value list
[attr ^= "value"]	The element that has a specific attribute with an exact pattern at the beginning of the value
[attr $= "value"]	The element that has a specific attribute with an exact pattern at the end of the value
[attr *= "value"]	The element that has a specific attribute with an exact pattern anywhere in the value

Access of DOM element

getElementsByTagName(tagname): It returns a list of elements with the given tag name. It can be called on any DOM element.
getElementById(id): It returns the element with the given id. It can be called on any DOM element. If there are more than element with the same id, it usually returns the first one.
document.getElementsByClassName(className): It returns the elements with the given style class name. If there is no such element, it returns null.

Selector API

querySelector(selectorString) method: It returns the first element that matches the selector string, or null if there is no such a selector. It can be called on document object or an element node;
querySelectorAll(selectorString) method: It returns all the matching elements in a NodeList, or null if there is no such a selector. It can be called on document object or an element node;

References

Selectors Level 3
Jason C. Teague, CSS3: Visual QuickStart Guide, 5th edition
Selectors API Level 1