2022-03-23|閱讀時間 ‧ 約 6 分鐘

【自學程式】好用的 CSS 偽類選擇器 :nth-child() 與 :nth-of-type()

相信透過之前的介紹，大家對於 CSS 選擇器（CSS selector）已經不陌生了，今天我們要來聊聊兩個在實務上非常好用的偽類（pseudo class ）語法，他們分別是 :nth-child() 與 :nth-of-type()，在了解這兩個語法之前，我們首先要先來聊聊什麼是「偽類」呢？

如果你並不是很確定什麼是 CSS 選擇器，建議可以先閱讀下文，再回來閱讀這篇文章：

什麼是 CSS 偽類（pseudo class）？

根據 MDN 文件，pseudo class （文件翻譯為虛擬類別，但多技術書籍內稱其為偽類）語法可以讓元素處在特定條件時套用指定的 CSS 效果。

舉例來說，當我們想要創造一個按鈕，當按鈕準備被使用者點擊，也就是觸發 JavaScript 的 mouseover 事件時，產生與原來樣式不一樣的效果，此時我們就可以使用 :hover 這個偽類，來讓我們的按鈕在滑鼠移動到按鈕時，套用不同的 CSS 樣式：

從上方的程式碼範例中，我們可以看到使用偽類的方式為 CSS 選擇器加上一個偽類語法，即可以做到在特定條件發生時，套用不同的樣式。

這裡需要注意的是，帶有偽類語法的 CSS 選擇器，其實跟一般的 CSS 語法沒有兩樣，一樣會帶有下方覆蓋上方的概念，所以我們只需要在偽類中寫入「需要改變的樣式」即可，其他的樣式依然會維持原有 CSS 選擇器中規範的樣式。

而當 mouseover 事件結束時，被額外加上去的樣式也會被移除，這就是偽類的運作模式。

由於偽類有非常多種，應用的情境也不同，接著就切入到我們今天的重點 :nth-child() 與 :nth-of-type() 吧！

:nth-child() 偽類選取第 n 個同層元素

我們先來簡單介紹一下 :nth-child() ，與上述的 :hover 偽類不同，這一個偽類後面多了一組小括號，這代表什麼意思呢？

根據 MDN ，:nth-child() 是一個可以針對特定條件匹配特定群組中的同層元素（sibling element），我們可以在小括號中帶入欲匹配的條件，舉例來說：

在上方範例中，我們想要序列為三的倍數的 li 元素帶有不同的顏色，此時我們就可以將 3n 這個參數帶入 :nth-child() 這個偽類中，並在偽類前帶上 li 選擇器，就可以獲得上方的效果。

這聽起來是不是很熟悉呢？是的，有些偽類的使用方式其實就跟 JavaScript 中的函式很像，只是在 CSS 中，有預先寫好一些條件，我們只要根據規範帶入指定條件即可，不需針對參數去做額外的設定。

關於 :nth-child() 中可以帶的參數：

An+B：某個特定的倍數，例如：2n、3n、4n，或者是 2n+1、3n+2 這種特殊的條件都可以被 CSS 所接受，這邊的 n 會根據同層元素的多寡，從零開始做起算。
指定數字：某個指定的數字，例如：1、2、3 等指定的序列，但通常我們比較少用到（因為除非有特殊的狀況，不然一般網頁的樣式會因為要管理方便，會以規律性的樣式為主）。
偶數及基數：在大部分類似函式的偽類中，我們幾乎都可以帶入 odd（奇數）或是 even（偶數），這兩個參數。

這裡需要注意的是， :nth-child() 中的參數只接受整數，選取的是同層元素，而不是指定元素中的子元素，這一點是自己在初學偽類時最常犯的錯，導致自己選半天選不到正確的元素。

補充：目前主流瀏覽器皆支援此語法。

:nth-of-type() 偽類選取同層同類別之元素

:nth-of-type() 這個語法跟 :nth-child() 使用的方法，及可以帶入的參數內容幾乎一模一樣，但這兩個語法不同的地方在於，:nth-of-type() 會額外根據同類型且同層的元素序列作匹配，而 :nth-child() 則單純根據同層元素的「總序列」來做匹配，這是什麼意思呢？

讓我們再來看一次 :nth-child() 的程式碼範例：

在上方的範例中，我們指定 p 段落的顏色為橘色，但是當 p 的序列為整體同層元素的三的倍數時，就會變成綠色。

但如果我們將語法改成用 :nth-of-type() 呢？此時我們要將參數改成 2n 才會生效，因為在此語法中，我們並不是以「整體序列」來做參考，而是以選擇器的序列（也就是 p 類別中的第二個），所以這也是為什麼我們要注意帶入參數的序列差異：

基本上這就是 :nth-child() 及 :nth-of-type() 偽類的使用方式了，是不是弄懂後發現它們其實沒這麼複雜呢？

上方的範例主要是讓大家可以更快、簡便的方式了解這兩個語法的差異，但在實務上可以透過這兩個語法快速且簡單的創造各式各樣的跳序列樣式，如果之後有遇到，再來跟大家分享更多更進階的範例及用法。

關於 pseudo class 你有什麼想要跟我分享的嗎？歡迎下方留言與我分享！

希望今天的文章有幫助到正在閱讀的你，如果你喜歡我的文章的話，可以留下你的愛心或是收藏我的文章，也或者可以點選「贊助」，你的一杯咖啡絕對是我持續寫下去的動力！或是透過拍拍手，用你小小的行動支持我的創作！

我是Vivian，我們下次見。

關於我：

一名從英文系畢業的前端工程師，喜歡閱讀、寫東西及自我成長。

｜Instagram: Vivian Yeh｜vivian_enlife

｜聯絡我：vivian.enlife@gmail.com

參考文件：MDN-:nth-child()、MDN-:nth-of-type()

分享至

成為作者繼續創作的動力吧！

RD少女養成計畫

追蹤

【自學程式】好用的 CSS 偽類選擇器 :nth-child() 與 :nth-of-type()

什麼是 CSS 偽類（pseudo class）？

:nth-child() 偽類選取第 n 個同層元素

:nth-of-type() 偽類選取同層同類別之元素

作者的相關文章

Vivian Yeh - 跨領域轉職的軟體工程師的其他內容

你可能也想看

發表回應

【自學程式】好用的 CSS 偽類選擇器 :nth-child() 與 :nth-of-type()

什麼是 CSS 偽類（pseudo class）？

:nth-child() 偽類選取第 n 個同層元素

:nth-of-type() 偽類選取同層同類別之元素

作者的相關文章

Vivian Yeh - 跨領域轉職的軟體工程師 的其他內容

你可能也想看

發表回應

Vivian Yeh - 跨領域轉職的軟體工程師的其他內容