CSS {selectors: reference}

Basic

Universal
*
selects all elements
  1. a
  2. b
  3. c
  4. d
Type
div
selects all elements of that type
  1. a
  2. div
  3. b
  4. div
Class
.c
selects all elements of that class
  1. .a
  2. .b
  3. .c
  4. .d
Id
#i
selects all elements of that id
  1. #a
  2. #b
  3. #i
  4. #d

Combinator

Descendant
div a
selects specified elements that are descendants of the first element
div
  1. a
    1. a
    2. c
  2. b
    1. a
    2. d
Direct Child
div > a
selects elements that are direct children of the first element
div
  1. a
    1. a
    2. c
  2. b
    1. a
    2. d
General Sibling
div ~ a
selects elements directly after the specified element
  1. a
  2. div
  3. a
  4. a
Adjacent Sibling
div + a
selects elements that are siblings of specified element and come directly after the specified element
  1. a
  2. div
  3. a
  4. a
Or
div, a
selects elements that match any element in the list
  1. a
  2. div
  3. a
  4. b
And
div.c
selects elements that match all the selector combinations
  1. .a
  2. div.c
  3. .c
  4. div

Attribute

Has
[a]
selects elements that have that attribute
  1. [a]
  2. [a='1']
  3. [c]
  4. d
Exact
[a='1']
selects elements that have that attribute with exactly that value
  1. [a]
  2. [a='1']
  3. [c]
  4. d
Begins With
[a^='1']
selects elements that have that attribute which starts with that value
  1. [a='12']
  2. [a='21']
Ends With
[a$='1']
selects elements that have that attribute which end with that value
  1. [a='12']
  2. [a='21']
Substring
[a*='1']
Selects elements that have that attribute which contain that value anywhere
  1. [a='12']
  2. [a='21']

Pseudo Element

Before
div::before
creates an empty element directly before the children of the selected element
div
  1. b
  2. c
  3. a
After
div::after
creates an empty element directly after the children of the selected element
div
  1. b
  2. c
  3. a

Pseudo Element (State)

Hover
button:hover
selects elements that are hoverable by the mouse
Focus
button:focus
selects elements that are being focused
Required
input:required
selects elements that have the required attribute
Checked
input:checked
selects checkboxes and radio buttons that are checked
Disabled
input:disabled
selects inputs that have the disabled attribute

Pseudo Element (Position / Other)

First Child
a:first-child
selects the first child of the specified element's parent
div
  1. a
  2. c
  3. a
Last Child
a:last-child
selects the last child of the specified element's parent
div
  1. a
  2. c
  3. a
Nth Child
a:nth-child(2n)
selects the specified element according to paramater (not zero based) given. For example, (2n) selects every other element
div
  1. a
  2. a
  3. b
  4. a
Nth Last Child
a:nth-last-child(3)
selects the specified element according to paramater (not zero based) given, counting from the end
div
  1. a
  2. a
  3. b
  4. a
Only Child
a:only-child
selects elements that are the only child inside a container
div
a
First of Type
a:first-of-type
selects elements that are the first of a type inside a container
div
  1. b
  2. a
  3. a
  4. b
Last of Type
a:last-of-type
selects elements that are the last of a type inside a container
div
  1. b
  2. a
  3. a
  4. b
Nth of Type
a:nth-of-type(2)
selects elements that are the nth of a type inside a container, based on the paramater given to it
div
  1. b
  2. a
  3. a
  4. b
Only of Type
a:only-of-type
similar to only-child, but selects elements if they are the only type of that element inside a container
div
  1. b
  2. a
  3. b
  4. b
Not
a:not(.c)
selects all elements that are not the specified element
  1. b
  2. a.c
  3. a
  4. a.d