虛擬類別選擇器 ( 類型位置 )

虛擬類別選擇器有許多種，而「類型位置」相關的選擇器，會根據「特定類型」的元素在文件結構中的位置狀態進行選取，這種虛擬類別選擇器有 :first-of-type、:last-of-type、:nth-of-type(n)、:nth-last-of-type(n) 和 :only-of-type，這篇教學會對這些虛擬類別選擇器進行深入介紹。

「類型位置」虛擬類別選擇器

下方列出和「類型位置」有關的虛擬類別選擇器 ( 支援度 All 表示主流瀏覽器都支援 )：

:first-of-type

「:first-of-type」表示「第一個出現的元素類型」，會搭配「指定元素名稱」一起使用，如果沒有指定元素名稱，會造成所有元素都被選取 ( 所以不會這樣做 )，下方的 CSS 會將 body 裡，所有元素中出現的第一個 em 元素變成紅色。

線上展示：https://codepen.io/oxxo/pen/BaeovqR

<!-- HTML 程式碼 -->
<div>
  <h2>OXXO.STUDIO</h2>
  <span><em>hello</em> <em>world!!</em> <em>every body!!</em></span>
</div>
<nav>
  <h3>Menu</h3>
  <span><em>Apple</em>、<em>Orange</em></span>
<nav>
<ul>
  <li><em>Google</em></li>
  <li>Apple</li>
  <li><em>Microsoft</em></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  em:first-of-type {color: red;}  /* 所有元素裡的第一個 em */
</style>

:last-of-type

「:last-of-type」表示「倒數第一個出現的元素類型」，會搭配「指定元素名稱」一起使用，如果沒有指定元素名稱，會造成所有元素都被選取 ( 所以不會這樣做 )，下方的 CSS 會將 body 裡，所有元素中出現的倒數第一個 em 元素變成紅色。

線上展示：https://codepen.io/oxxo/pen/ZENbVVq

<!-- HTML 程式碼 -->
<div>
  <h2>OXXO.STUDIO</h2>
  <span><em>hello</em> <em>world!!</em> <em>every body!!</em></span>
</div>
<nav>
  <h3>Menu</h3>
  <span><em>Apple</em>、<em>Orange</em></span>
<nav>
<ul>
  <li><em>Google</em></li>
  <li>Apple</li>
  <li><em>Microsoft</em></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  em:first-of-type {color: red;}  /* 所有元素裡的倒數第一個 em */
</style>

:nth-of-type(n)

「:nth-of-type(n)」表示「同一層元素裡，從頭數來第 n 個元素類型」，會搭配「指定元素名稱」一起使用，下方的 CSS 會將 body 裡，所有元素中的「第二個 em」會被選取並變成紅色文字。

線上展示：https://codepen.io/oxxo/pen/MWdaLgz

<!-- HTML 程式碼 -->
<div>
  <h2>OXXO.STUDIO</h2>
  <span><em>hello</em> <em>world!!</em> <em>every</em> <em>body!!</em></span>
</div>
<nav>
  <h3>Menu</h3>
  <span><em>Apple</em>、<em>Orange</em></span>
<nav>
<ul>
  <li><em>Google</em>、<em>Map</em>、<em>Cloud</em></li>
  <li>Apple</li>
  <li><em>Microsoft</em></li>
  <li><em>Disney</em>、<em>Pixar</em></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  em:nth-of-type(2) {color: red;}  /* 所有元素裡的第二個 em */
</style>

:nth-child(n) 裡的 n 不僅可以只是數字，也可以使用奇數「odd」和偶數「even」這兩個英文單字，使用後就會自動取得奇數項元素或偶數項元素，下方的 CSS 使用 odd 單字，就會選取所有元素裡奇數的 em。

em:nth-of-type(odd) {color: red;}

如果單純使用 n，也可當作一個「根據 An+B 公式自動擴展的序列」( n 從 0 開始計算 )，例如「2n」就等於「2,4,6,8....」，又或者「2n+2」就是「4,6,8,10...」，例如下方的例子使用「3n-2」，就會從第一個 em 開始，接著取出「3n-2」的 em。

線上展示：https://codepen.io/oxxo/pen/NWVGoqY

<!-- HTML 程式碼 -->
<div>
  <h2>OXXO.STUDIO</h2>
  <span><em>hello</em> <em>world!!</em> <em>every</em> <em>body!!</em></span>
</div>
<nav>
  <h3>Menu</h3>
  <span><em>Apple</em>、<em>Orange</em></span>
<nav>
<ul>
  <li><em>Google</em>、<em>Map</em>、<em>Cloud</em></li>
  <li>Apple</li>
  <li><em>Microsoft</em></li>
  <li><em>Disney</em>、<em>Pixar</em></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  em:nth-of-type(3n-2) {color: red;}
</style>

:nth-last-of-type(n)

「:nth-last-of-type(n)」表示「同一層元素裡，倒數第 n 個元素類型」，會搭配「指定元素名稱」一起使用，下方的 CSS 會將 body 裡，所有元素中的「倒數第二個 em」會被選取並變成紅色文字。

線上展示：https://codepen.io/oxxo/pen/eYapxZa

<!-- HTML 程式碼 -->
<div>
  <h2>OXXO.STUDIO</h2>
  <span><em>hello</em> <em>world!!</em> <em>every</em> <em>body!!</em></span>
</div>
<nav>
  <h3>Menu</h3>
  <span><em>Apple</em>、<em>Orange</em></span>
<nav>
<ul>
  <li><em>Google</em>、<em>Map</em>、<em>Cloud</em></li>
  <li>Apple</li>
  <li><em>Microsoft</em></li>
  <li><em>Disney</em>、<em>Pixar</em></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  em:nth-last-of-type(2) {color: red;}  /* 所有元素裡的倒數第二個 em */
</style>

:nth-child(n) 裡的 n 不僅可以只是數字，也可以使用奇數「odd」和偶數「even」這兩個英文單字，使用後就會自動取得倒數的奇數項元素或偶數項元素，下方的 CSS 使用 odd 單字，就會選取所有元素裡倒數奇數的 em。

em:nth-last-of-type(odd) {color: red;}

如果單純使用 n，也可當作一個「根據 An+B 公式自動擴展的序列」( n 從 0 開始計算 )，例如「2n」就等於「...8,6,4,2」，又或者「2n+2」就是「10,8,6,4...」，例如下方的例子使用「3n-2」，就會從倒數第一個 em 開始，接著取出「3n-2」的 em。

線上展示：https://codepen.io/oxxo/pen/dyEYaXp

<!-- HTML 程式碼 -->
<div>
  <h2>OXXO.STUDIO</h2>
  <span><em>hello</em> <em>world!!</em> <em>every</em> <em>body!!</em></span>
</div>
<nav>
  <h3>Menu</h3>
  <span><em>Apple</em>、<em>Orange</em></span>
<nav>
<ul>
  <li><em>Google</em>、<em>Map</em>、<em>Cloud</em></li>
  <li>Apple</li>
  <li><em>Microsoft</em></li>
  <li><em>Disney</em>、<em>Pixar</em></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  em:nth-last-of-type(3n-2) {color: red;}
</style>

:only-of-type

「:only-of-type」表示「同一層只有一種元素類型，且這種元素只有一個」，會搭配「指定元素名稱」一起使用，下方的網頁執行後，只有包含一個 em 的元素裡的 em 會變成紅色。

線上展示：https://codepen.io/oxxo/pen/JjqYxEG

<!-- HTML 程式碼 -->
<div>
  <h2>OXXO.STUDIO</h2>
  <span><em>hello</em> <em>world!!</em> <em>every</em> <em>body!!</em></span>
</div>
<nav>
  <h3>Menu</h3>
  <span><em>Apple</em>、<em>Orange</em></span>
<nav>
<ul>
  <li><em>Google</em>、<em>Map</em>、<em>Cloud</em></li>
  <li><em>Apple</em></li>
  <li><em>Microsoft</em></li>
  <li><em>Disney</em>、<em>Pixar</em></li>
</ul>


<!-- CSS 程式碼 -->
<style>
  em:only-of-type {color: red;}
</style>

小結

這篇教學介紹與「類型位置」相關的虛擬類別選擇器相當實用，除了可以選取特定類型的元素，更能根據位置進行進一步的篩選，是相當實用的 CSS 選擇器喔！

• W3C 官方參考：https://www.w3.org/TR/2018/SPSD-html5-20180327/disabled-elements.html
• MDN 文件參考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～