:first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 22

Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 22 篇

:first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器

11th鐵人賽 css教學網頁教學 css 金魚

CSScoke

2019-10-07 19:15:04

12204 瀏覽

分享至

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

:first-child 以及 :last-child 兩個選取器剛好是相對的，一個選第一個 ( :first-child )，一個選最後一個 ( :last-child )，這選取器的意思夠簡單了吧，好! 今天就講到這邊了，各位金魚我們明天見~~~(喂!!)

我又回來了!(沒人要你回來啊) 其實這兩個選取器的用途就很明顯，直接拿其中一個 :first-child 從字面上來解釋的話，就是選到第一個子物件，那麼很多人就會可能出現某一類錯誤的用法，舉個例子來看

HTML

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

CSS

.group .A:first-child{
	color: red;	
}

各位可以思考一下上面這個選取器會不會讓第一個 div ˙內容變成紅色文字?

答案是 不會! 就一些新手的觀念可能會認為，我要選取到 第一個 .A 這個子物件 這樣觀念有誤嗎? Amos 能告訴你，當然有誤! 還誤很大! 事實上在這種選取器中，我們可以先從右側開始讀起，這樣會比較容易理解一點，從右側開始讀起的話是 :first-child，所以意思是我要選到第一個子物件，所以我們來看在 .group 裡面第一個子物件是誰? 是 <h1> 標籤，接著我們在繼續往左邊看下去就是 .A 這個 class，於是找到 .group 內的 .A 物件，但這個 .A 物件是第二個子物件，不是第一個，所以不符合規則，相對的我們就抓不到任何一個符合這個 CSS 選取器的物件了。

事實上我們把上面這個 CSS 選取器修改一下就能看到 :first-child 選取器的作用了，各位改成下方這樣來看看

.group :first-child{
	color: red;
}

上面這段語法要特別注意一下我們的 :first-child 左側是有空格的，我的目的是為了選取到 .group 內的第一個子物件，所以各位會看到 <h1> 標籤被選取到了，文字色彩會變成紅色。

重點在順序

如標題所說，事實上 :first-child 的重點在順序，他是選取第一個「子」物件，所以如果你在 :first-child 的左側有緊接著其他的項目的話，會增加選取的條件，萬一不符合就會選不到了。

換個說法好了，:first-child是選取你的第一個小孩，不管男女，只管他是不是第一個，如果你覺得英文很難懂，那我們換中文來解釋好了 :first-child / :第一個小孩，然後我們把 HTML 換成下方結構來看看好了

<Amos的小孩群>
	<小孩 男生>男生</小孩>
	<小孩 女生>女生</小孩>
	<小孩 男生>男生</小孩>
	<小孩 女生>女生</小孩>
	<小孩 男生>男生</小孩>
</Amos的小孩群>

上方原始碼中，男生跟女生只是分類( class )，接著我們把 CSS 換成以下寫法來看的話

Amos的小孩群 :第一個小孩{ ...略 }

上面這樣應該很容易看懂了，如果我們換成以下寫法的話，就會選不到了

Amos的小孩群 女生:第一個小孩{ ...略 }

上面這段語法就是說我要選到 Amos的小孩群 (是到底要生多少啦)裡面的第一個小孩(從右邊開始看)，並且是女生，但是因為第一個小孩是男生，所以就沒有符合條件的了，所以選不到。從頭到尾都是先看順序而不看分類，這樣大家懂了吧!

實務應用

不管是要選第一個或是最後一個物件，在實務應用上面其實都經常會遇到，像是昨天 Amos 寫的 :not() 否定選取器 - 一個搞排擠的選取器最後就有提到一個例子，我們可以利用否定選取器來排除第一個物件，好讓我們可以選取到其他的物件，當然也可以利用否定選取器來排除最後一個物件好選到其他的物件 ( 是在念繞口令嗎? )。

當然像是麵包屑這一類的項目，我們也能利用 :first-child 選取器針對第一個項目設定圖示讓畫面更豐富好看。又或者我們依樣可利用 :first-child 來處理方塊酥版面中的第一個區塊，就能省下設定多個 class 的時間。

不管如何，有需要能想到就能用到，以上就是今天的金魚都能懂的 CSS 選取器 - :first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～