本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw
讓我們好好善用CSS選取器吧

前一篇提到了選取第一個與最後一個物件的 :first-child 與 :last-child 選取器，接下來我們繼續來看看跟他們很像似的 :first-of-type 與 :last-of-type 兩個選取器，這兩個選取器分別是選取同類元素中的第一個物件與最後一個物件，如果要拿 :first-child 與 :last-child 來做舉例跟比較的話， :first-child 與 :last-child 是不管分類只管順序，而 :first-of-type 與 :last-of-type 則是先做分類在看順序，正如同上一篇說的，很多人會誤用 :first-child 來選取特定分類中的第一個，但這需求跟功能其實是 :first-of-type 的作用，讓我們來看個例子吧

<div class="group">
	<h1 class="A">Amos 金魚腦</h1>
	<div class="A">A</div>
	<span class="B">B</span>
	<div class="A">A</div>
	<span class="B">B</span>
</div>

上面這段原始碼跟我們上一篇很相似，但是 Amos 特別讓 <h1> 多加了一個 class，接著我用們以下 CSS 來選取看看，我想選取到第一個 <div> 標籤，所以我這樣寫

.group div:first-of-type{
	background: red;
}

於是你可以發現第一個 <div> 被選取到了，所以變成了紅色背景，用上次我們的舉例方式來看，從選取器右邊先看，:first-of-type 表示我要選取到第一個某類型的物件，接著 div 限定了我要選取的類型，加起來的意思就是 我要選取到第一個 div 這類型的物件，意思應該就很清楚了。

既然知道 :first-of-type 是選取到特定類型的物件的話，那萬一我沒有指定類型會如何呢? 我們來看看以下例子

.group :first-of-type{
	background: red;
}

上面這段原始碼如果你有實作看看的話就會發現，前三個物件( h1、div、span )都被選取到了，這是因為你沒有指定分類，所以瀏覽器就把每一個類型元素的第一個選起來了，這樣應該很清楚了吧。

實務應用

說真的， :first-of-type 與 :last-of-type 這兩個選取器目前 Amos 用到的機會不多，應該是說我目前遇到需要用這兩個選取器的機會實在很少很少，但其實只要能清楚分辨 :first-child 、 :last-child 、 :first-of-type 、 :last-of-type 之間的差異，就能夠在適當的時間點用上囉，但沒有例子好像說不太過去吼! 以下就舉個簡單的例子試試。

在一個內容頁面中，我想要讓第一個段落的第一個字做首字放大，但由於我不確定客戶上資料時是否會有第一個文字不是段落的狀況 ( 可能是日期時間也說不定 )，所以我想限定只有 p 標籤才會有這個效果，那麼 HTML 應該會長的像下面這樣

<article class="main-article">
	<h1>金魚都懂的 CSS 選取器</h1>
	<p>金魚都懂的 CSS 選取器是一個免費的 CSS 選取器教學文章，內容不僅講解 CSS 選取器的原理，還用淺顯易懂的舉例及實務的範例講解各式的應用，讓你不僅理解 CSS 選取器的原理外還能學會實務應用，看到簡直賺到啊。</p>
	<p>上面這段文字把我的腦力擠完了，這段文字我就不打算掰太多內容了，各位就認真接下來的選取器吧，還有! 記得訂閱!</p>
</article>

CSS 則是可以用組合式寫法

.main-article p:first-of-type:first-letter{
	font-size: 38px;
	float: left;
	color: red;
	margin: 0 6px 6px 0;
}

上面例子可以到這邊看成品，以上就是今天的 金魚都能懂的 CSS 選取器 - :first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～

金魚都能懂的教學系列

• 金魚都能懂的網頁設計入門 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的這個網頁畫面怎麼切 - 金魚都能懂了你還怕學不會嗎 系列
• 金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎 系列

鐵人雙主題挑戰中，歡迎訂閱一波

金魚都能懂的這個網頁畫面怎麼切

立刻訂閱 CSS可樂的網站/頻道享受精彩文章

Line搜尋「@CSScoke」加入CSS可樂公開帳號，可以收到 Amos 第一手資訊喔
CSS 可樂部落格
CSS coke 的 Youtube 直播頻道
快按此訂閱 CSS coke 的頻道接收最新教學