CSS偽類 - :nth-last-child()

CSS :nth-last-child() 偽類根據元素在其同級元素中的位置進行匹配，從末尾開始計數。

語法

:nth-last-child(<nth> [of <complex-selector-list>]?) {
   /* ... */
}

可能的值

odd − 此值表示從末尾開始計數的一系列中所有奇數編號（例如，1,3,5..等等）的同級元素。
even − 此值表示從末尾開始計數的一系列中所有偶數編號（例如，2,4,6...等等）的同級元素。
函式表示法 (<an+b>) − 此值表示從其父容器末尾開始計數的一系列中每第 an+b 個子元素，其中 a 是一個正整數，n 是從 0 開始的計數器變數。b 是另一個正整數。

下表描述了CSS選擇器的列表及其說明

選擇器	描述
tr:nth-last-child(odd) 或 tr:nth-last-child(2n+1)	表示HTML表格中的所有奇數行。
tr:nth-last-child(even) 或 tr:nth-last-child(2n)	表示HTML表格中的所有偶數行。
:nth-last-child(6)	表示第六個元素，從末尾開始計數。
:nth-last-child(5n)	表示從末尾開始計數的每第五個元素（5,10,15 等）。
:nth-last-child(3n+4)	表示從末尾開始計數的元素 4, 7, 10, 13 等。
:nth-last-child(-n+2)	表示同級元素組中的最後兩個元素。
p:nth-last-child(n) 或 p:nth-last-child(n+1)	表示同級元素組中的每個 <p> 元素。
p:nth-last-child(1) 或 p:nth-last-child(0n+1)	表示每個 <p> 元素，它是同級元素組中的第一個元素，從末尾開始計數。

CSS :nth-last-child() - 列表示例

這是一個如何設定ol列表中li元素樣式的示例：

<html>
<head>
<style>
   li:nth-last-child(-n+1) {
      font-weight: bold;
      color: red;
   }
   li:nth-last-child(3n+4){
      background-color: pink;
   }
   li:nth-last-child(5n){
      font-weight: bold;
   }
</style>
</head>
<body>
   <p>Styling last item as bold and red color.</p>
   <p>Styling every third list item starting with the fourth list item from the last with a pink background.</p>
   <p>Styling fifth item from last as bold.</p>
   <ol>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
      <li>Item 4</li>
      <li>Item 5</li>
      <li>Item 6</li>
      <li>Item 7</li>
      <li>Item 8</li>
      <li>Item 9</li>
      <li>Item 10</li>
   </ol>
</body>
</html>

CSS :nth-last-child() - 表格示例

這是一個如何設定表格中特定行的樣式的示例：

<html>
<head>
<style>
   table {
      border: 3px solid black;
   }
   tr:nth-last-child(6) {
      font-weight: bold;
      color: blue;
   }
   tr:nth-last-child(odd)  {
      background-color: pink;
   }
   tr:nth-last-child(even)  {
      background-color: greenyellow;
   }
</style>
</head>
<body>
   <p>Styling the heading of the table as bold and blue in color.</p>
   <p>Styling all odd-numbered rows from the end with a pink background color.</p>
   <p>Styling all even-numbered rows from the end with a greenyellow background color.</p>
   <table>
      <tr>
         <th>Names</th>
      </tr>
      <tr>
         <td>Jhon Sean</td>
      </tr>
      <tr>
         <td>Rocky Luis</td>
      </tr>
      <tr>
         <td>Oliver David</td>
      </tr>
      <tr>
         <td>Marry Alamnd</td>
      </tr>
      <tr>
         <td>Dora Ann</td>
      </tr>
   </table>
</body>
</html>

CSS :nth-last-child() - 段落示例

這是一個如何設定段落樣式的示例：

<html>
<head>
<style>
   p:nth-last-child(n){
      color: red;
   }
   p:nth-last-child(1){
      color: blue;
   }
</style>
</head>
<body>
   <h3>Styled all paragraphs with red color.</h3>
   <h3>Sets the text color of the last paragraph to blue.</h3>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
   <p>It is a long established fact that a reader will be distracted by the readable content.</p>
   <p>Contrary to popular belief, Lorem Ipsum is not simply random text.</p>
   <p>The standard chunk of Lorem Ipsum used since the 1500s</p>
</body>
</html>

CSS :nth-last-child() - <selector>

使用<selector>元素的:nth-last-child()偽類的語法

li:nth-last-child(even of .fruits) {
   /* Your styles here */
 }

將選擇器li.fruits移到函式外部將選擇所有具有fruits類的li元素，而不管它們在子元素列表中的位置。

li.fruits: nth-last-child(-n + 3);

這是一個如何使用:nth-last-child(even of .fruits)偽類為具有.fruits類的特定專案設定樣式的示例：

<html>
<head>
<style>
   ul {
      list-style-type: none;
   }
   li {
      display: inline-block;
      border: 3px solid black; 
      margin: 5px; 
      padding: 5px; 
   }
   .fruits {
      background-color: pink;
   }
   li:nth-last-child(1 of .fruits) {
      font-weight: bold;
      color: blue;
   }
</style>
</head>
<body>
   <h3>Styling list items with the class fruits to have a pink background.</h3>
   <h3>Counting from the last child, styling first child element of the fruits class.</h3>
   <ul>
      <li>Orange</li>
      <li>Apple</li>
      <li class="fruits">Mango</li>
      <li>Grapes</li>
      <li class="fruits">Banana</li>
      <li>Watermelon</li>
      <li class="fruits">Cheery</li>
      <li class="fruits">Pear</li>
   </ul>
</body>
</html>

列印頁面