今日講下點樣可以用 CSS 來選取你想要的 DOM 元件。

### TLDR

直接去下面兩個網站睇用法

:first-child 用法 : https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child

:last-child 用法 : https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child

### CSS Selector

透過 CSS 的特定語法來選取 DOM 元件，名稱叫 Selector。

Selector 是一串文字用來指定某一個 / 一些 DOM 物件，例如我們有以下一個 html :

```html
<div>
	<table>
		<tbody>
			<tr>
				<td>
					Hello world A
				</td>
				<td>
					Hello world B
				</td>
			</tr>
			<tr>
				<td>
					Hello world C
				</td>
				<td>
					Hello world D
				</td>
			</tr>
			<tr>
				<td>
					Hello world F
				</td>
				<td>
					Hello world G
				</td>
			</tr>
		</tbody>
	</table>
</div>
```

如果你想要取出 Hello world A 的 `td`，就可以用以下的 Selector :

```css
// 取出 td
div table tbody tr:first-child td:first-child {

	// 變更背景色彩
	background-color: rgb(0, 0, 0);
}
```

如果你想要取出 Hello world F 的 `td`，就可以用以下的 Selector :

```css
// 取出 td
div table tbody tr:last-child td:first-child {

	// 變更背景色彩
	background-color: rgb(0, 0, 0);
}
```

如果你想要取出 Hello world G 的 `td`，就可以用以下的 Selector :

```css
// 取出 td
div table tbody tr:last-child td:last-child {

	// 變更背景色彩
	background-color: rgb(0, 0, 0);
}
```

很方便的呢 !