iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 22
5
Modern Web

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

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

: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 頭尾選取器 - 有頭有尾有始有終的選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~

金魚都能懂的教學系列

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

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

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

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


上一篇
:not() 否定選取器 - 一個搞排擠的選取器
下一篇
:first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

尚未有邦友留言

立即登入留言