iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 23
5
Modern Web

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

:first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器

前一篇提到了選取第一個與最後一個物件的 :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可樂的網站/頻道享受精彩文章

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


上一篇
:first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器
下一篇
:only-child 獨子選取器 - 這是啥媽寶選取器
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30

尚未有邦友留言

立即登入留言