【CSS3】-last-of-type selector nth-last-of-type(n) selector_html/css_WEB-ITnose

last-of-type selector

":last-of-type" selector and ":first-of-type" selector functionality It's the same, the difference is that it selects the last child element of a certain type under the parent element.

Example demonstration

Set the background of the last paragraph element in the container "div.wrapper" to orange through the ":last-of-type" selector

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

HTML code:

<div class="wrapper">  <p>我是第一个段落</p>  <p>我是第二个段落</p>  <p>我是第三个段落</p>  <div>我是第一个Div元素</div>  <div>我是第二个Div元素</div>  <div>我是第三个Div元素</div></div>

CSS code:

.wrapper > p:last-of-type{  background: orange;}

Demo results:

nth-last-of-type(n) selector

":nth-last-of The -type(n)" selector is the same as the ":nth-of-type(n)" selector. It selects a certain child element type specified in the parent element, but its starting direction is from the last child element. , and its usage is similar to the ":nth-last-child(n)" selector introduced in the previous section.

Example demonstration

Wrap the third-to-last paragraph in the container "div.wrapper" through the ":nth-last-of-type(n)" selector The background is set to orange.

HTML code:

<div class="wrapper">  <p>我是第一个段落</p>  <p>我是第二个段落</p>  <p>我是第三个段落</p>  <p>我是第四个段落</p>  <p>我是第五个段落</p>  <div>我是一个Div元素</div>  <p>我是第六个段落</p>  <p>我是第七个段落</p></div>

CSS code:

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

Demo results: