iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 26
7
Modern Web

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

:nth-child() & :nth-last-child() - 你覺得燒腦但其實根本不燒腦的選取器

總算...金魚都能懂的 CSS 選取器 講了20幾篇,總算可以講到這個大家都很有興趣的 :nth-child 選取器了,看到這邊又要老話一句了 ( 夠了你! ),再次的重複一下, child 主要看的是排列順序,所以不管你寫在:nth-child 前面的是甚麼,他都只認順序喔,所以有了這樣的概念後,我們就可以開始來了解了,其實很早之前 Amos 就寫過一篇了,各位可以來這邊看看使用CSS3 :nth-child(n) 選取器教學,當然 Amos 也建議你可以先看之前寫的 「:first-child & :last-child 頭尾選取器 - 有頭有尾有始有終的選取器」、「:first-of-type & :last-of-type 首項分類與尾首分類選取器 - 一個不會讓你看錯男女的選取器」、「:only-child 獨子選取器 - 這是啥媽寶選取器」、「:only-of-type 類型獨子選取器」,看完之後再來閱讀這一篇會更輕鬆喔。

正文開始,:nth-child 選取器的語法後方會帶一組括號,並且在括號內可以寫簡單的計算公式,所以一個完整的語法會是 :nth-child( an+b ) 這樣,其中括號內的公式可以有多種計算方式,而這整個語法會非常像是程式的迴圈概念,他會一個個的計算出所有答案,然後將這些特定數的的物件選取起來。所以重點來了,括號內的公式到底有那些?

選取奇數與偶數

:nth-child() 用白話文來說的話,基本上就是 選取第 n 的子物件,而這個 n 就是我們要給予的條件,也就是我們要選取到的目標務,這個 n 可以是公式也可以使用關鍵字,我們就先來看 oddeven 這兩個關鍵字,我們可以在括號內使用關鍵字 odd 來選取奇數物件,而其中最重要的一點,也是程式設計師比較容易卡腦的地方就是,起始值是 1,讓我們用範例簡單來看一下吧。

HTML

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>

CSS

li{
	margin: 3px 0;
}
ul :nth-child(odd){
	background-color: #CCC;
}

上面這段例子各位可以狠狠的點擊這邊看畫面,可以看到的結果會是 1、3、5、7、9 ... 這幾個奇數物件被選取到了,當然如果你是程式設計師的話,應該會卡一下,畢竟各位都是選索引值,所以就請各位程式設計師忍耐並轉腦消化一下了。

按照上面這個邏輯,那麼我們使用關鍵字 even 的話就是選取偶數囉,不多說馬上來看一下範例的 CSS 原始碼

ul :nth-child(even){
	background-color: #CCC;
}

上面這段例子各位依舊可以狠狠的點擊這邊看畫面,可以看到結果就是 2、4、6、8、10...這幾個排序為偶數的物件被選取到了,這樣大家應該有比較理解了吧。

選取特定單一物件

有了前面的例子後,我們就能來看選取特定單一物件的方式,我們只需要將想要選取的那個物件的排序數字寫進括號內即可,例如我想要選取的是第八個物件,那我就寫 :nth-child(8){ ...略 } 即可。如果這麼容易理解你還要看例子的話...自己寫! (兇屁啊) ㄟ不對! 我這邊寫好了,你可以狠狠的點擊這邊看畫面

那麼這樣可能會有朋友就會突發奇想了,想問看看是否有簡單的方式可以讓我選取到第 8 個跟第 7 個? 然後就會有新手開始自己發明語法規則了,千萬別這樣自己亂寫啊,那只是浪費你的生命、時間以及肝指數啊! 比較簡單的方式大概就是寫兩個選取器並且使用群組式宣告了,像是下方這樣

ul :nth-child(8),
ul :nth-child(7){
	background-color: #CCC;
}

如果你覺得上面這樣的寫法有損你的程度的話,那麼我們也可以用比較裝逼的方式,一行搞定來選,像是下面這樣的語法

ul :nth-child(n+7):nth-child(-n+8){
	background-color: #CCC;
}

上面這樣的選取方式等於是順便講解了 選取特定區間物件 的方式,你可以狠狠的點擊這邊看畫面

間隔跳位選取物件

一開始我們講到了公式,事實上 :nth-child 最棒且最強大的地方就在於他的公式選取了,例如我們可以每隔三個就選取一個物件,這很像是迴圈在做的事情對吧! 不多說先看效果先

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
	<li>10</li>
</ul>
ul{
	width: 500px;
	margin: 100px auto;
	border: 1px solid #888;
	padding: 3px;
}
li{
	margin: 3px 0;
	font-size: 30px;
}
ul :nth-child(3n){
	background-color: #CCC;
}

你可以點擊這邊看畫面,結果就是每三個裡面的第三個會被選取,如果你要每4個裡面的第4個被選取到的話,那就是直接在括號內寫 4n,是不是非常的簡單呢。

間隔選取原理

在上個例子中我們可以利用簡單的公式達到間隔選取的目的,但原理到底是甚麼? 讓我們來看一下數學公式吧! 不!!! 別折磨我了,我自小家境清寒數學不好(謎:兩者有何關聯?),好不容易長大脫離數學的魔掌了,現在又要回去看公式,哪招啦?!別害怕! 我們只需要知道四則運算中的三個「加/減/乘」就夠了,這都是我們平日就在用的數學運算喔。

公式分解前段

括號內的公式an+b由四個項目組成,其中 ab 是可以自訂的數值,而 + 則是可變更的運算符號 ( 運算子 ),至於 n 則是一個固定且不不可更改由 0 開始的遞增數列。

除了上述的公式分解外,此外我們又可以把公式拆成兩大部分,an 指的是 a乘n 的意思,所以綜合上面一開始所講的 n 所代表的意義,我們就能像下面這樣來解釋

3n 指的是 3 乘 n,而 n 是個由0開始的固定數列 ( 就是 0123456789...n),我們就可以得到下列結果清單

  • 3 x 0 = 0
  • 3 x 1 = 3
  • 3 x 2 = 6
  • 3 x 3 = 9
  • 3 x 4 = 12
  • 以此類推繼續計算下去

上面清單中最右側的 0、3、6、9、12 就是我們得到的結果,也就是會被選取到的物件順序了,所以 :nth-child(3n) 可以讓我們選取到第3個、第6個、第9個、第12個...不斷選下去,

公式分解後段

上面講述了公式前段的原理,接下來來看公式an+b後段的 +b 的部分,其中 + 號是可以被變更為 - 號,也就是跟前段公式搭配起來之後,要取得的計算結果,所以假如前段是 3n 後段是 +1 的話,我們就能夠取得以下結果清單

  • 3 x 0 + 1 = 1
  • 3 x 1 + 1 = 4
  • 3 x 2 + 1 = 7
  • 3 x 3 + 1 = 10
  • 3 x 4 + 1 = 13
  • 以此類推繼續計算下去

如果我們把 + 號改成 - 號的話,:nth-child(3n-1) 就能得到以下清單。

  • 3 x 0 - 1 = -1
  • 3 x 1 - 1 = 2
  • 3 x 2 - 1 = 5
  • 3 x 3 - 1 = 8
  • 3 x 4 - 1 = 11
  • 以此類推繼續計算下去

公式變化

看完公式的分析之後,這時候我們就能進一步的來看公式可以怎樣的變化,在公式中我們可以運用 ab 兩值的賦值與否來增加變化,所以就會有以下幾種公式變化

  • an+b
  • an-b
  • n+b
  • n-b
  • an
  • -an+b

上面這一堆公式很有趣眼花吧,千萬不要被這一堆公式嚇到了,而眼尖的你應該會發現最後一個公式沒講過的樣子,其實不是沒講過,只是 Amos 沒有提到 a 也可以是負值罷了。

事實上這一堆公式中,還能繼續分析下去,但是為了節省時間,我們還是先把比較常用的提出來就好,實際上我們在專案中比較常用到的大概就是 an+b 比較多,所以真的別被這一堆公式嚇傻了,放心!

實際應用與計算技巧

在多數的專案中,我們比較常用到的大概就是奇數 ( odd )、偶數 ( even ) 及倍數 ( an ) 這三個項目的選取,像是 3n 其實就是 3 的倍數,4n 就是 4 的倍數,就這麼簡單,要增加變化的則是多一個 倍數中的特定數 這個項目,如果說我們要選取到 3 個裡面的第 2 個項目的話,我們就能夠直接寫 3n+2,如果我們要選取到 3 個裡面的第 1 個的話,我們就寫 3n+1,根本連算都不用算啊,一眼就能看出來我要選哪個啦。

表格色彩的應用

為了讓各位更加清楚 倍數中的特定數 這個選取技巧,就讓我們用表格來看看這個選取方式吧,以下 HTML 是一個很單純 3 欄 9 列的資料表格

<table>
	<tbody>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
		<tr>
			<td>資料</td>
			<td>資料</td>
			<td>資料</td>
		</tr>
	</tbody>
</table>

如果我希望讓他每隔 3 橫列就能有一整個列的色彩,那我的 CSS 可以這樣寫

table tr:nth-child(3n){
	background-color: #ccc;
}

如果我希望讓他每 3 橫列中的第 1 列有一整列的色彩,那我 CSS 可以這樣寫

table tr:nth-child(3n+1){
	background-color: #ccc;
}

如果我希望讓他每 3 橫列中的第 2 列有一整列的色彩,那我 CSS 可以這樣寫

table tr:nth-child(3n+2){
	background-color: #ccc;
}

是不是計算變的超級簡單了呢! (是根本不用計算了吧)

對了! 我是不是忘了講 :nth-last-child() 是做甚麼的了? 恩......簡單來說,跟 :first-child 以及 :last-child 一樣,:nth-child 是從前面開始選,而 :nth-last-child 是從結尾開始選,就這樣的差別而已,這應該不需要特地花時間解釋了吧^^

以上就是今天的 金魚都能懂的 CSS 選取器 - :nth-child - 你覺得燒腦但其實根本不燒腦的選取器,如果文中描述有誤歡迎各位前輩不吝指正,各位金魚我們明天見~

金魚都能懂的教學系列

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

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

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

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


上一篇
:only-of-type 類型獨子選取器
下一篇
:nth-of-type() & :nth-last-of-type() - 你覺得燒腦但其實根本不燒腦的選取器趴兔
系列文
金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎30
1
iT邦新手 5 級 ‧ 2019-10-12 07:12:25

這篇文章真的很實用

CSScoke iT邦新手 4 級‧ 2019-10-12 15:27:55 檢舉

CSS 選取器系列每一篇都很實用啊,至少我是這樣認為啦 XD

0
mimicats
iT邦新手 5 級 ‧ 2019-11-20 18:01:35

感謝 Amos 講解的如此清楚 !! 受益良多!!

0
阿展展展
iT邦研究生 1 級 ‧ 2019-12-05 08:48:23

第三個妹妹 第六個妹妹 第九個... /images/emoticon/emoticon25.gif

我要留言

立即登入留言