CSS

TypeSelector:a{ }

IDSelector:#a{ }

*IDis not recommended as a selector

ChildSelector:a > b{ }

DescendantSelector:a b{ }

Combine Descendant & IDSelector:#a b{ }

ClassSelector:.a{ }

Combine the ClassSelector:b.x{ }

Comma CombinatorSelector:a, c{ }

UniversalSelector:*{ }

Combine UniversalSelector:a *{ }

Adjacent SiblingSelector:a + b{ }

General SiblingSelector:a ~ b{ }

First Child PseudoSelector:b:first-child{ }

or

first-child

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

Only Child PseudoSelector:

b:only-child{ } or

a :only-child{ }

Last Child PseudoSelector:b:last-child{ }

or

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

Nth Child PseudoSelector:

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 ChildSelector:

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 TypeSelector:b:first-of-type{ }

Nth of TypeSelector:

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

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

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

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

*nis an every positive integer or zero value.

Only of TypeSelector:b:only-of-type{ }

Last of TypeSelector:

b:last-of-type{ }

a :last-of-type{ }

or

.x:last-of-type{ }

or

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

EmptySelector:a:empty{ }

* No children elements or text.

Negation Pseudo-classSelector:

a:not(.x){ }

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

AttributeSelector:

[for]{ }

a[for]{ }

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

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

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

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