"CSS3"---last-of-type selector +nth-last-of-type (n) Selector

Last-of-type Selector

The selector :last-of-type and the :first-of-type selector function are the same, but the difference is that he chooses a type under the parent element 最后一个子元素 .

Sample Demo

With the ": Last-of-type" selector, set the last paragraph element background in the container "div.wrapper" to orange

( Hint: This paragraph is not the last child element of the "Div.wrapper" container).

HTML code:

<Divclass= "wrapper">  <P>I am the first paragraph</P>  <P>I'm a second paragraph.</P>  <P>I'm a third paragraph.</P>  <Div>I'm the first DIV element</Div>  <Div>I'm a second div element</Div>  <Div>I'm a third div element</Div></Div>

CSS code:

. Wrapper > P:last-of-type {  background: orange;}

Demo Result:

Nth-last-of-type (n) Selector

The selector :nth-last-of-type(n) and the :nth-of-type(n) selector are the same, selecting a SEED element type specified in the parent element, but it starts from the last child element and is used similar to the selector described in the previous section :nth-last-child(n) .

Sample Demo

The ": Nth-last-of-type (N)" selector sets the background of the third-to-last paragraph in the container "div.wrapper" to orange.

HTML code:

<Divclass= "wrapper">  <P>I am the first paragraph</P>  <P>I'm a second paragraph.</P>  <P>I'm a third paragraph.</P>  <P>I'm the fourth paragraph.</P>  <P>I'm the fifth paragraph.</P>  <Div>I am a DIV element</Div>  <P>I'm the sixth paragraph.</P>  <P>I'm the seventh paragraph.</P></Div>

CSS code:

. Wrapper > P:nth-last-of-type (3) {  background: orange;}

Demo Result:

"CSS3"---last-of-type selector +nth-last-of-type (n) Selector