Day19-:nth-last-child & :nth-last-of-type 從後數起！CSS 的倒數計算法

前面我們講到過 :last-child，它可以直接選中同層的最後一個元素，而 :nth-last-child 則讓我們能從最後開始計算，選取倒數的元素，這對於快速選取倒數幾個元素非常方便。同樣地，除了選取所有元素外，我們還有 :nth-last-of-type，可以專門選取同類型的元素。

💠:nth-last-child 基本用法

語法

選擇器:nth-of-type(n) {
	屬性名: 屬性值;
}

• 選中所有兄弟元素中的倒數第 n 個
  
  

範例

一起試試：[CODEPEN]

選中 .outer 中倒數第三個且為 <p> 的元素

<div class="outer">
  <p class="box">p</p>
  <p class="box">p</p>
  <p class="box">p</p>
  <div class="box">div</div>
  <div class="box">div</div>
  <p class="box">p</p>
  <p class="box">p</p>
  <p class="box">p</p>
  <div class="box">div</div>
  <div class="box">div</div>
</div>

.outer p:nth-last-child(3) {
  background-color: skyblue;
}

倒數第三個 <p> 元素背景色將會變成 skyblue

如果現在想選中倒數第二個呢？我們把條件改成 2

.outer p:nth-last-child(2) {
  background-color: skyblue;
}

但這時不會選中任何元素

為什麼呢？

這是因為倒數第二個元素並非<p>元素，所以我們可以直接選取倒數第二個所有子元素

.outer > :nth-last-child(2) {
  background-color: skyblue;
}

如此一來，將會選取 .outer 裡所有元素中倒數第 2 個直接子元素

如果想針對類型，選取所有 <p> 元素中倒數第二個 <p> 元素，你可以使用 :nth-last-of-type

💠:nth-last-of-type 基本用法

語法

選擇器:nth-last-of-type(n) {
	屬性名: 屬性值;
}

• 選中所有同類型兄弟元素中的倒數第 n 個
  
  

範例

一起試試：[CODEPEN]

選中 .outer 中倒數第二個 <p> 元素

<div class="outer">
  <p class="box">p</p>
  <p class="box">p</p>
  <p class="box">p</p>
  <div class="box">div</div>
  <div class="box">div</div>
  <p class="box">p</p>
  <p class="box">p</p>
  <p class="box">p</p>
  <div class="box">div</div>
  <div class="box">div</div>
</div>

.outer p:nth-last-of-type(2) {
  background-color: gold;
}

將會選中 .outer 中倒數第二個 <p> 元素，而不會影響其他類型的元素。

如果沒有指定類型，將會選中所有類型倒數第二個元素

.outer > :nth-last-of-type(2) {
  background-color: gold;
}

---

💠總結

:nth-last-child 和 :nth-last-of-type 提供了一種靈活的方式，讓我們可以從後往前選取元素。前者不限制元素類型，適合快速選取不同類型的倒數元素；而後者則專門針對同類型的元素，提供更精確的選取能力。這兩個選擇器能夠滿足我們在排版中對元素的精細操作需求。

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。