:first-child

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:first-child是CSS當中的一種偽類別（pseudo-class），代表任何身為長子的元素（親元素的第一個子元素）。

語法

Error: could not find syntax for this item

範例

範例 1

HTML 內文

html
<div>
  <span>This span is limed!</span>
  <span>This span is not. :(</span>
</div>

CSS 內文

css
span:first-child {
  background-color: lime;
}

呈現效果如下：

範例 2 - 使用 UL

HTML 內文

html
<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
</ul>

CSS 內文

css
li {
  color: red;
}
li:first-child {
  color: green;
}

呈現效果如下：

規格

Specification
Selectors Level 4
# first-child-pseudo

瀏覽器相容性

BCD tables only load in the browser

參見