CSS :nth-child() ảo class

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

CSS :nth-child(n)}} pseudo-class được sử dụng để khớp phần tử là con của phần tử cha ở vị trí n phần tử con

pseudo-class này khớp với phần tử dựa trên chỉ số của nó trong danh sách con của phần tử cha.

n số có thể là một số, một từ khóa (lẻ hoặc chẵn) hoặc một công thức (như an + b)

Lưu ý:Xem :nth-of-type() pseudo-class để chọn phần tử là con của phần tử cha trong danh sách con của nócùng loại (tên thẻ)của n phần tử con của phần tử.

Mô hình

Ví dụ 1

Cách sử dụng :nth-child() Pseudo-class:

/* Chọn phần tử thứ tư trong bất kỳ nhóm anh em nào */
:nth-child(4) {
  background-color: yellow;
}
/* Chọn phần tử thứ hai trong các phần tử anh em div */
div:nth-child(2) {
  background-color: red;
}
/* Chọn phần tử li thứ hai trong danh sách */
li:nth-child(2) {
  background-color: lightgreen;
}

Thử ngay

Ví dụ 2

lẻ và chẵn là từ khóa, có thể được sử dụng để khớp các phần tử con có chỉ số lẻ hoặc chẵn (chỉ số của phần tử con đầu tiên là 1).

Ở đây, chúng ta chỉ định màu nền khác nhau cho các thẻ <p> có chỉ số lẻ và chẵn:

p:nth-child(odd) {
  background-color: red;
}
p:nth-child(even) {
  background: lightgreen;
}

Thử ngay

Ví dụ 3

sử dụng công thức (an + b) Mô tả:a biểu thị số dư nguyên, n là tất cả các số nguyên dương bắt đầu từ 0b là số dư nguyên

Ở đây, chúng ta chỉ định màu nền cho tất cả các thẻ <p> có chỉ số là bội số của 3 (sẽ chọn các phần tử thứ ba, thứ sáu, thứ chín, v.v.):

p:nth-child(3n+1) {
  background-color: red;
}

Thử ngay

Ví dụ 4

Ở đây, chúng ta chỉ định màu nền cho tất cả các thẻ <p> có chỉ số là bội số của 3. Sau đó chúng ta trừ đi 1 (sẽ chọn các phần tử đầu tiên, thứ tư, thứ bảy, v.v.):

p:nth-child(3n-1) {
  background-color: red;
}

Thử ngay

Cú pháp CSS

:nth-child(index | lẻ | chẵn | an+b) {
  các định nghĩa 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ợ đầy đủ pseudo-class.