CSS3---Structural pseudo-class selector-nth-last-child (n)

Structural pseudo-Class selector-nth-last-child (n)

": Nth-last-child (N)" selector and the previous ": Nth-child (N)" selector is very similar, but here is a "last", the role of the ": Nth-child (n)" selector differs, Select a specific element by starting the calculation from the last child element of a parent element.

Case Demo

Select the bottom Fifth list item in the list to set its background to orange.

HTML code:

<ol>  <li>item1</li>  <li>item2</li>  <li>item3</li>  <li>item4</li>  <li>item5</li>  <li>item6</li>  <li>item7 </li>  <li>item8</li>  <li>item9</li>  <li>item10</li>  <li>item11</li>  <li>item12</li>  <li>item13</li>  < Li>item14</li>  <li>item15</li></ol>?

CSS code:

Ol > Li:nth-last-child (5) {  background:orange;}

Demo Result:

CSS3---Structural pseudo-class selector-nth-last-child (n)