CSS

Type Selector: a { }

ID Selector: #a { }

* ID is not recommended as a selector

Child Selector: a > b { }

Descendant Selector: a b { }

Combine Descendant & ID Selector: #a b { }

Class Selector: .a { }

Combine the Class Selector: b.x { }

Comma Combinator Selector: a, c { }

Universal Selector: * { }

Combine Universal Selector: a * { }

Adjacent Sibling Selector: a + b { }

General Sibling Selector: a ~ b { }

First Child Pseudo Selector: b:first-child { }

or

first-child

* In the second diagram, first-child is 'a' element, not 'b' element. So there is nothing to be selected

Only Child Pseudo Selector:

b:only-child { } or

a :only-child { }

Last Child Pseudo Selector: b:last-child { }

or

* In the second diagram, last-child is 'c' element, not 'b' element. So there is nothing to be selected.

Nth Child Pseudo Selector:

b:nth-child(2) { }

or

or

* In the third diagram, nth-child(2) is 'a' element, not 'b' element. So there is nothing to be selected.

a :nth-child(2) { }

Nth Last Child Selector:

a :nth-last-child(2) { } or

c:nth-last-child(2) { }

a:nth-last-child(2) { } or

b:nth-last-child(2) { } or

d:nth-last-child(2) { }

* In this diagram, nth-last-child(2) is 'c' element, not 'b' element. So there is nothing to be selected.

First of Type Selector: b:first-of-type { }

Nth of Type Selector:

a:nth-of-type(2) { }

a:nth-of-type(even) { }

a:nth-of-type(odd) { }

a:nth-of-type(2n+1) { }

* n is an every positive integer or zero value.

Only of Type Selector: b:only-of-type { }

Last of Type Selector:

b:last-of-type { }

a :last-of-type { }

or

.x:last-of-type { }

or

* Those items won’t be selected as no .x is presented

Empty Selector: a:empty { }

* `empty` indicates no children elements or text.

Negation Pseudo-class Selector:

a:not(.x) { }

a:not(:last-of-type) { }

Attribute Selector:

[for] { }

a[for] { }

Attribute Value Selector: a[for=“x”] { }

Attribute Starts Selector: [for^=“x”] { }

Attribute Ends Selector: [for$=“x”] { }

Attribute Wildcard Selector: [for*=“x”] { }