CSS pseudo-Class selector

The pseudo-class selector for CSS is really love and hate, each time is very perfect to be confused, or to do a summary.

: Last-of-type Select last element

<Divclass= "box">    <P>1 always believe in good things</P>    <a>2 is about to happen</a>    <P>3 always believe in good things</P>    <P>4 always believe in good things</P>    <a>5 is about to happen</a>    <a>6 is about to happen</a></Div>

P:last-of-type { background: red;}

: First-of-type Select the first element

<Divclass= "box">    <P>1 always believe in good things</P>    <a>2 is about to happen</a>    <P>3 always believe in good things</P>    <P>4 always believe in good things</P>    <a>5 is about to happen</a>    <a>6 is about to happen</a></Div>

A:first-of-type { background: red;}

: Nth-child (n) Select the nth child element of the parent element

1 <Divclass= "box">2     <P>1 always believe in good things</P>3     <a>2 is about to happen</a>4     <P>3 always believe in good things</P>5     <P>4 always believe in good things</P>6     <a>5 is about to happen</a>7     <a>6 is about to happen</a>8 </Div>

The second child element must be a, otherwise invalid

A:nth-child (2){ background: red;}

: Nth-last-child (n) Select the last nth child element of the parent element

1 <Divclass= "box">2     <P>1 always believe in good things</P>3     <a>2 is about to happen</a>4     <P>3 always believe in good things</P>5     <P>4 always believe in good things</P>6     <a>5 is about to happen</a>7     <a>6 is about to happen</a>8 </Div>

The penultimate must be a, otherwise invalid

A:nth-last-child (2){ background: red;}

CSS pseudo-class selector