Day18-:nth-of-type 針對類型元素任你挑

在先前的文章中，我們介紹了 :nth-child，它讓我們能根據所有同層元素的位置進行選取。而這次要介紹的 :nth-of-type，則是針對相同類型的元素進行篩選。

這意味著，如果有不同類型的元素混合在同一層中，:nth-of-type 只會對指定的元素類型生效，忽略其他類型的元素。例如，如果你要選取一個層級中的第三個 <div> 元素，其他類型的元素如 <p> 就不會干擾選取結果。

💠:nth-of-type 基本用法

:nth-of-type 的使用方式與 :nth-child 幾乎相同。如果你了解 :nth-child 的語法，使用 :nth-of-type 也會輕而易舉。它會根據相同類型的兄弟元素來進行篩選。

語法

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

選取同層同類型的元素中，符合 an+b 位置的元素：

• a：元素的間隔數值，決定每隔幾個元素選一次
• n：一個自然數，從 0 開始遞增 (0, 1, 2, 3…)，代表每次計算的倍數
• b：起始位置的偏移量，決定從哪個位置開始選取
  
  

範例

一起試試：[CODEPEN]

<div class="outer">
  <p class="box">p</p>
  <p class="box">p</p>
  <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 class="box">div</div>
  <div class="box">div</div>
  <div class="box">div</div>
  <div class="box">div</div>
  <div class="box">div</div>
  <div class="box">div</div>
  <div class="box">div</div>
  <div class="box">div</div>
</div>

1. 選中單個同類型元素

.outer div:nth-of-type(3) {
  background-color: gold;
}

選中 .outer 底下第三個為 <div> 的元素，這裡的 :nth-of-type(3) 等同於公式 0n + 3

2. 選中偶數同類型元素

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

這會選取所有偶數位置的 <div> 元素，類似寫法還可以使用 even 關鍵字：

.outer div:nth-of-type(even) {
  background-color: gold;
}

3. 選中奇數同類型元素

.outer div:nth-of-type(2n+1) {
  background-color: gold;
}

這樣會選中所有奇數位置的 <div> 元素，odd 關鍵字也能達到相同效果：

.outer div:nth-of-type(odd) {
  background-color: gold;
}

4. 選中特定規則同類型元素

.outer div:nth-of-type(3n+2) {
  background-color: gold;
}

這將選擇 .outer 中的第 2、5、8、11… 等等位置的 <div> 元素，偏移量為 2，且每次間隔 3 個。

隨堂小測驗

Q：如果要選中前五個 <div> 元素怎麼寫呢？

Ａ：

.outer div:nth-of-type(-n + 5) {
  background-color: gold;
}

-n+5 的意思是選擇前 5 個 <div> 元素。這種寫法的邏輯是通過使用負數範圍來逆向選取，也就是從第 1 個元素到第 5 個元素的範圍內都會被選中。

---

💠 總結

:nth-of-type 是一個非常實用的選擇器，能幫助我們在相同類型的元素中依次篩選特定項目。無論是選中單個元素、偶數或奇數位置，還是根據複雜的規則進行篩選，:nth-of-type 提供了靈活的控制方式，特別是在處理含有不同類型混合的兄弟元素時，能夠精準地針對指定類型進行樣式設置。

🚀實體工作坊分享

玩轉 Web頁面的前端技術(HTML/CSS/JS) 一日體驗課

最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！

🚀線上課程分享

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

Hahow

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

六角學院

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

Udemy

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