Pseudo-class :first-child của CSS

Định nghĩa và cách sử dụng

CSS :first-child Pseudo-class được sử dụng để chọn phần tử là phần tử con đầu tiên của phần tử cha (trong một nhóm phần tử anh em).

Mô hình

Ví dụ 1

Chọn và thiết lập樣式 cho mỗi phần tử <p> là phần tử con đầu tiên của phần tử cha của nó:

p:first-child {
  background-color: yellow;
}

Thử ngay

Ví dụ 2

Chọn và thiết lập樣式 cho mỗi phần tử <i> là phần tử con đầu tiên của phần tử cha của nó:

i:first-child {
  background: yellow;
}

Thử ngay

Ví dụ 3

Chọn và thiết lập樣式 cho mỗi phần tử <li> đầu tiên trong danh sách:

li:first-child {
  background: yellow;
}

Thử ngay

Ví dụ 4

Chọn và thiết lập樣式 cho mỗi phần tử con đầu tiên của mỗi phần tử <ul>:

ul > :first-child {
  background: yellow;
}

Thử ngay

Ngữ pháp CSS

:first-child {
  các khai báo css;
}

Chi tiết kỹ thuật

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn pseudo-class.