CSS Selectors Cheatsheet
A CSS selectors cheatsheet using the concepts laid out in Thinking in Dimensions: A Unified Approach to Filter grammars.
Logic operators
|
AND
|
selector1selector2
# has classA AND classB
.classA.classB
# Has classA and attributeA
.classA[attributeA]
# Has attributeA and attributeB
*[attributeA][attributeB]
|
|
OR
|
selector1, selector2
|
|
NOT
|
:not(selector)
|
Filter operators
Note: See below for state-based pseudo-selectors.
|
Semantic dimension
|
Element Hierarchy and content
(Permutation)
|
Element Position
(Permutation)
|
Element type
(Nominal)
|
Attribute
(Permutation)
class and id attributes are Fields separated by
spaces
|
|
Non anchored match
|
||||
|
Any / Presence
|
Not really applicable (Covered by the * wildcard)
|
*
Includes head, body, etc
|
[attribute]
|
|
|
Exact match
|
element
|
[attribute='value’]
Complement:
Attribute not equal:
[name!=”value”]
Field equality:
All elements with one of its classes exactly equal:
.class
First element with one of its ids exactly equal (Document
with multiple elements with the same id is invalid):
#id
|
||
|
Top / Left anchored match
|
||||
|
Absolute match
|
Document’s root element:
:root
Contents
:first-line
:first-letter
Before any element that isn’t self-closing:
* content attribute is required, but can be left blank
:before
|
:first-child
Every two elements, starting at one (positive
numbers: infinite series)
:nth-child(2n+1)
|
Combination of element type exact match and and absolute relative position
The first child of a particular type for a parent:
:first-of-type
:nth-of-type
|
Starting with: [attribute^='value’]
Contains prefix (equal to a given string or starting with that string followed by a hyphen (-).)
[name|=”value”]
|
|
Immediate Relative match
|
Child:
.list > li
|
Adjacent sibling (immediately proceeded by):
h1 + p
|
Not applicable (Nominal data)
|
(Thinking of each character in the substring as being the next immediate match of the one before):
Contains: [name*=”value”]
|
|
Any relative match
|
Descendant:
sel1 sel2
|
Any following sibling:
h1 ~ p
|
Not available
|
|
|
Bottom / Right anchored match
|
||||
|
Absolute match
|
Content:
After any element that isn’t self-closing
* content attribute is required, but can be left blank
:after
|
:last-child
:nth-last-child
|
Combination of element type exact match and and relative position
:last-of-type
:nth-last-of-type
|
Ends with: [name$=”value”]
|
|
Immediate Relative match
|
Content:
:empty
|
Negative numbers: finite offset)
:nth-child(-n+3)
|
Not applicable (Nominal data)
|
Not really applicable - just the reverse of the left/anchor match
|
|
Any relative match
|
Not available
|
|||
|
Projections
|
||||
|
Exclusive (unique) match
|
Not really applicable (and/or covered by the position dimension instead)
|
Combines position and count:
All elements of for which they’re the only child of their parent:
:only-child
|
Combines position and type, and then count:
All elements for which they’re the only of their type in their parent:
:only-of-type
|
Not available
|
State-based pseudo-selectors
State-based pseudo-selectors filter on the set of virtual flags (nominal data) that keep track of element’s state in the DOM.
|
User/Mouse
|
|
|
:link
|
Unvisited links
|
|
:hover
|
Mouse over
|
|
:visited
|
Visited links
|
|
:active
|
Element is being activated (e.g. mid-click)
|
|
:focus
|
Focus via click or keyboard event
|
|
:selection
|
Part of an element that is selected by the user
|
|
:target
|
Selects the element matching the URI target
|
|
Form elements
|
|
|
:default
|
Elements in their default state
|
|
:enabled
|
Elements that have their boolean disabled property strictly equal to false
|
|
:disabled
|
Disabled elements
|
|
:optional
|
Elements with no "required" attribute
|
|
:invalid
|
Invalid elements
|
|
:read-only
|
Elements with “readonly” attribute
|
|
:read-write
|
Elements without “readonly” attribute
|
|
:enabled
|
Elements not in a disabled state
|
|
:in-range
|
Applies to elements that have range limitations
|
|
:checked
|
Works for checkboxes, radio buttons, and options of select elements.
|
|
:out-of-range
|
|
|
Localisation
|
|
|
:lang
|
Selects elements with matching lang=“*’ attribute
|