CSS Selectors (Cheatsheet)
| tag | elements of type "tag" |
| .class | elements with class "class" |
| tag.class | elements of type "tag" and also with class "class" |
| #id | elements with id "id" |
| * | all elements (normally used with combinators) |
| x,y,z | elements of any given selector |
| x:hover | x while mouse pointer over it |
| x:active | x while mouse pointer pressed |
| a:link | unvisited link |
| a:visited | visited link |
| x:fullscreen | x while in fullscreen mode |
| x:checked | x if in "checked" state |
| x:default | x if it represents the default in its group |
| x:disabled | x if disabled |
| x:enabled | x if enabled (i.e., not disabled) |
| x:empty | x if empty |
| x:focus | x if it owns the keyboard focus |
| x:focus-within | x if itself or a descendant owns focus |
| x:indeterminate | x if its state is indeterminate |
| x:invalid | x if its value does not validate successfully |
| x:optional | x if its "required" attribute was not set |
| x:required | x if its "required" attribute was set |
| x:read-only | x if its "readonly" attribute was set |
| x:read-write | x if its "readonly" attribute was not set |
| x:valid | x if its value validates successfully |
| x::first-letter | first letter of x |
| x::first-line | first line of x |
| x::selection | user-selected text |
| x::before | inserts content before x |
| x::after | inserts content after x |
|
| x y | general descendant y of x (y may be *) |
| x > y | direct descendant y of x (child, y may be *) |
| x + y | adjacent sibling y of x (y may be *) |
| x ~ y | general sibling y of x (y may be *) |
| x:only-child | x if only child of its parent |
| x:first-child | x if 1st child of its parent |
| x:last-child | x if last child of its parent |
| x:nth-child(n) | x if nth child of its parent |
| x:nth-last-child(n) | x if nth-last child of its parent |
| x:only-of-type | x if only of its type in its parent |
| x:first-of-type | x if first of its type in its parent |
| x:last-of-type | x if last of its type in its parent |
| x:nth-of-type(n) | x if nth of its type in its parent |
| x:nth-last-of-type(n) | x if nth-last of its type in its parent |
| even | every even numbered element |
| 2n | (same as above) |
| odd | every odd numbered element |
| 2n+1 | (same as above) |
| 3n | elements no. 3,6,9,... |
| 3n+1 | elements no. 1,4,7,... |
| 3n+2 | elements no. 2,5,8,... |
| n+5 | 5th element and following |
| -n+4 | 1st to 4th element |
| x[attr] | x if attribute "attr" is present |
| x[attr="val"] | x if value of "attr" equals "val" |
| x[attr*="val"] | x if value of "attr" contains "val" |
| x[attr~="val"] | x if "attr" contains whitespace-sep. value "val" |
| x[attr|="val"] | x if "attr" contains hyphen-separated value "val" |
| x[attr^="val"] | x if value of "attr" begins with "val" |
| x[attr$="val"] | x if value of "attr" ends with "val" |
| x:not(y) | x if y does not apply |
| x:empty | x if it contains neither text nor elements |
| :root | the <html> element |
| :scope | element used as reference for other selectors |
| :target | element whose id matches document URL fragment |
|
