Hỗ trợ lọc các phần tử bên trong (con) một phần tử khác. Chỉ số gán cho các phần tử con, thay vì bắt đầu là 0 cho phần tử đầu tiên như trong bộ lọc vị trí, bắt đầu bằng 1.

Danh sách bộ lọc phần tử con  như bảng sau:

Selector Mô tả
:first-child Chọn phần tử con đầu tiên (tính thứ tự bao gồm các phần tử anh em khác kiểu). (theo ngữ cảnh) (Xem ví dụ 1)
:last-child Chọn phần tử con cuối cùng (tính thứ tự bao gồm các phần tử anh em khác kiểu). (theo ngữ cảnh) (Xem ví dụ 2)
:first-of-type Chọn phần tử con đầu tiên (tính thứ tự không bao gồm các phần tử anh em khác kiểu) của tất cả các phần tử cha của chúng. (Xem ví dụ 3)
:last-of-type Chọn phần tử con được cuối cùng (tính thứ tự không bao gồm các phần tử anh em khác kiểu) của tất cả các phần tử cha của chúng .(Xem ví dụ 4)
:nth-child(n)

:nth-child(even|odd)

:nth-child(Xn+Y)

 Chọn phần tử con (tính thứ tự bao gồm các phần tử anh em khác kiểu) thứ n hay ở vị trí (hay chỉ số) chẵn hoặc lẻ hay ở vị trí tính theo công thức Xn + Y, với X, Y là các tham số cho trước, n = 0, 1, 2,… của tất cả các phần tử cha của chúng (theo ngữ cảnh). (Xem ví dụ 5)
:nth-last-child(n)

:nth-last-child(even|odd)

:nth-last-child(Xn+Y)

 Chọn phần tử con (tính thứ tự bao gồm các phần tử anh em khác kiểu), tính từ phần tử cuối cùng đến phần tử đầu tiên (thứ tự ngược lại với bộ lọc :nth-child), thứ n hay ở vị trí (hay chỉ số) chẵn hoặc lẻ hay ở vị trí tính theo công thức Xn + Y, với X, Y là các tham số cho trước, n = 0, 1, 2,… của tất cả các phần tử cha của chúng (theo ngữ cảnh).  (Xem ví dụ 6)
:nth-of-type(n)

:nth-of-type(even|odd)

:nth-of-type(Xn+Y)

 Chọn phần tử con (tính thứ tự không bao gồm các phần tử anh em khác kiểu) thứ n hay ở vị trí (hay chỉ số) chẵn hoặc lẻ hay ở vị trí tính theo công thức Xn + Y, với X, Y là các tham số cho trước, n = 0, 1, 2,… của tất cả các phần tử cha của chúng (theo ngữ cảnh). (Xem ví dụ 7)
:nth-last-of-type(n)

:nth-last-of-type(even|odd)

:nth-last-of-type(Xn+Y)

 Chọn phần tử con (tính thứ tự không bao gồm các phần tử anh em khác kiểu), tính từ phần tử cuối cùng đến phần tử đầu tiên (thứ tự ngược lại với bộ lọc :nth-of-type), thứ n hay ở vị trí (hay chỉ số) chẵn hoặc lẻ hay ở vị trí tính theo công thức Xn + Y, với X, Y là các tham số cho trước, n = 0, 1, 2,… của tất cả các phần tử cha của chúng (theo ngữ cảnh). (Xem ví dụ 8)
:only-child Chọn các phần tử không có anh em (cùng cha). (Xem ví dụ 9)
:only-of-type Chọn các phần tử không có anh em cùng kiểu (cùng cha). (Xem ví dụ 10)

Xét đoạn mã HTML sau:


<body>

<h2> The heading </h2>

<p>The paragraph.</p>

<div style="border:1px solid; margin-bottom:10px;">

   <span>This is a span element</span>

   <p>The first paragraph in div.</p>

   <p>The second paragraph in div</p>

   <p>The last paragraph in div.</p>

</div>

<div style="border:1px solid; margin-bottom:10px;">

  <p>The first paragraph in div.</p>

  <p>The second paragraph in div.</p>

  <p>The last paragraph in div.</p>

</div>

<div style="border:1px solid; margin-bottom:10px;">

  <p>The first paragraph in div.</p>

</div>

</body>

Với đoạn mã HTML trên, chúng ta chú ý các phần tử cha là body (có các phần tử con trực tiếp là h2, p, và các div), div thứ nhất (có phần tử con trực tiếp là một phần tử span và ba phần tử p), div thứ hai (chứa ba phần tử p là con trực tiếp), và div cuối cùng (có một phần tử con trực tiếp là p).

Ví dụ 1: Chọn tất cả các phần tử con p đầu tiên và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:first-child").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con trực tiếp đầu tiên là h2
  • Phần tử div thứ nhất: con trực tiếp đầu tiên là span
  • Phần tử div thứ hai: con trực tiếp đầu tiên là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp duy nhất và đầu tiên là p (chọn)

Ví dụ 2: Chọn tất cả các phần tử con p cuối cùng và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:last-child").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con trực tiếp cuối cùng là div
  • Phần tử div thứ nhất: con trực tiếp cuối cùng là p (chọn)
  • Phần tử div thứ hai: con trực tiếp cuối cùng là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp duy nhất và cuối cùng là p (chọn)

Ví dụ 3: Chọn tất cả các phần tử con p đầu tiên (không quan tâm đến các phần tử anh em khác kiểu với nó) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:first-of-type").css("background-color", "yellow");

Kết quả

Giải thích kết quả: khác với first-child, lần này bộ lọc first-of-type chỉ xét các phần tử p mà không quan tâm đến các phần tử anh em khác kiểu với nó như h2 hay span

  • Phần tử body: con trực tiếp đầu tiên là p (chọn)
  • Phần tử div thứ nhất: con trực tiếp đầu tiên là p (chọn)
  • Phần tử div thứ hai: con trực tiếp đầu tiên là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp duy nhất và đầu tiên là p (chọn)

Ví dụ 4: Chọn tất cả các phần tử con p cuối cùng (không quan tâm đến các phần tử anh em khác kiểu với nó) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:last-of-type").css("background-color", "yellow");

Kết quả

Giải thích kết quả: khác với last-child, lần này bộ lọc last-of-type chỉ xét các phần tử p mà không quan tâm đến các phần tử anh em khác kiểu với nó như h2 hay span

  • Phần tử body: con trực tiếp cuối cùng là p (chọn)
  • Phần tử div thứ nhất: con trực tiếp cuối cùng là p (chọn)
  • Phần tử div thứ hai: con trực tiếp cuối cùng là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp duy nhất và cuối cùng là p (chọn)

Ví dụ 5: Chọn tất cả các phần tử con p thứ hai (tính thứ tự bao gồm các phần tử anh em khác kiểu với nó) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-child(2)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con trực tiếp thứ hai là p (chọn)
  • Phần tử div thứ nhất: con trực tiếp thứ hai là p (chọn)
  • Phần tử div thứ hai: con trực tiếp thứ hai là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp thứ hai không tồn tại

Chọn tất cả các phần tử con p ở vị trí chẵn (tính thứ tự bao gồm các phần tử anh em khác kiểu với nó) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-child(even)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: các con trực tiếp thứ hai là p (chọn), thứ tư là div
  • Phần tử div thứ nhất: con trực tiếp thứ hai là p (chọn), thứ tư là p (chọn)
  • Phần tử div thứ hai: con trực tiếp thứ hai là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp thứ hai không tồn tại

Chọn tất cả các phần tử con p ở vị trí được tính theo công thức 2n+1 (ở các vị trí 1, 3, 5, ….) (tính thứ tự bao gồm các phần tử anh em khác kiểu với nó) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-child(2n+1)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: các con trực tiếp đầu tiên là h2, thứ ba là div, thứ năm là div
  • Phần tử div thứ nhất: con trực tiếp thứ nhất là span, thứ ba là p (chọn)
  • Phần tử div thứ hai: con trực tiếp thứ nhất là p (chọn), thứ ba là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp thứ nhất là p (chọn)

Ví dụ 6: Chọn tất cả các phần tử con p thứ hai (tính thứ tự bao gồm các phần tử anh em khác kiểu với nó) tính thứ tự từ dưới lên trong cây DOM và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-last-child(2)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con trực tiếp thứ hai tính từ dưới lên là div
  • Phần tử div thứ nhất: con trực tiếp thứ hai tính từ dưới lên là p (chọn)
  • Phần tử div thứ hai: con trực tiếp thứ hai tính từ dưới lên là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp thứ hai tính từ dưới lên không tồn tại

Chọn tất cả các phần tử con p ở vị trí chẵn (tính thứ tự bao gồm các phần tử anh em khác kiểu với nó) tính thứ tự từ dưới lên trong cây DOM và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-last-child(even)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con trực tiếp thứ hai tính từ dưới lên là div, thứ tư là p (chọn)
  • Phần tử div thứ nhất: con trực tiếp thứ hai tính từ dưới lên là p (chọn)
  • Phần tử div thứ hai: con trực tiếp thứ hai tính từ dưới lên là p (chọn)
  • Phần tử div cuối cùng: con trực tiếp thứ hai tính từ dưới lên không tồn tại

Chọn tất cả các phần tử con p ở vị trí được tính theo công thức 2n+1 (ở các vị trí 1, 3, 5, ….) (tính thứ tự bao gồm các phần tử anh em khác kiểu với nó) tính thứ tự từ dưới lên trong cây DOM và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-last-child(2n+1)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con trực tiếp thứ nhất tính từ dưới lên là div, thứ ba là div, thứ năm là h2.
  • Phần tử div thứ nhất: con trực tiếp thứ nhất tính từ dưới lên là p (chọn), thứ ba là p (chọn).
  • Phần tử div thứ hai: con trực tiếp thứ nhất tính từ dưới lên là p (chọn) ), thứ ba là p (chọn).
  • Phần tử div cuối cùng: con trực tiếp thứ nhất tính từ dưới lên là p (chọn).

Ví dụ 7: Chọn tất cả các phần tử con p thứ hai (tính thứ tự không bao gồm các phần tử anh em khác kiểu với nó) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-of-type(2)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con p trực tiếp thứ hai không tồn tại
  • Phần tử div thứ nhất: con p trực tiếp thứ hai là p (chọn)
  • Phần tử div thứ hai: con trực tiếp thứ hai là p (chọn)
  • Phần tử div cuối cùng: con p trực tiếp thứ hai không tồn tại

Chọn tất cả các phần tử con p ở vị trí chẵn (tính thứ tự không bao gồm các phần tử anh em khác kiểu với nó)  và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-of-type(even)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con p trực tiếp thứ hai không tồn tại
  • Phần tử div thứ nhất: con p trực tiếp thứ hai là p (chọn)
  • Phần tử div thứ hai: con trực tiếp thứ hai là p (chọn)
  • Phần tử div cuối cùng: con p trực tiếp thứ hai không tồn tại

Chọn tất cả các phần tử con p ở vị trí được tính theo công thức 2n+1 (ở các vị trí 1, 3, 5, ….) (tính thứ tự không bao gồm các phần tử anh em khác kiểu với nó) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-of-type(2n+1)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: các con p trực tiếp đầu tiên
  • Phần tử div thứ nhất: con p trực tiếp thứ nhất và thứ ba
  • Phần tử div thứ hai: con p trực tiếp thứ nhất và thứ ba
  • Phần tử div cuối cùng: con p trực tiếp thứ nhất

Ví dụ 8: Chọn tất cả các phần tử con p thứ hai (tính thứ tự không bao gồm các phần tử anh em khác kiểu với nó) tính thứ tự từ dưới lên trên cây DOM và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-last-of-type(2)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con p trực tiếp thứ hai tính từ dưới lên không tồn tại.
  • Phần tử div thứ nhất: con p trực tiếp thứ hai tính từ dưới lên.
  • Phần tử div thứ hai: con p trực tiếp tiếp thứ hai tính từ dưới lên.
  • Phần tử div cuối cùng: con p trực tiếp thứ hai tính từ dưới lên không tồn tại.

Chọn tất cả các phần tử con p ở vị trí chẵn (tính thứ tự không bao gồm các phần tử anh em khác kiểu với nó) tính thứ tự từ dưới lên trên cây DOM và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-last-of-type(even)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con p trực tiếp vị trí chẵn tính từ dưới lên không tồn tại (chỉ có một p).
  • Phần tử div thứ nhất: con p trực tiếp thứ hai tính từ dưới lên.
  • Phần tử div thứ hai: con p trực tiếp tiếp thứ hai tính từ dưới lên.
  • Phần tử div cuối cùng: con p trực tiếp vị trí chẵn tính từ dưới lên không tồn tại (chỉ có một p).

Chọn tất cả các phần tử con p ở vị trí được tính theo công thức 2n+1 (ở các vị trí 1, 3, 5, ….) (tính thứ tự không bao gồm các phần tử anh em khác kiểu với nó) tính thứ tự từ dưới lên trên cây DOM và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:nth-last-of-type(2n+1)").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: con p trực tiếp vị trí đầu tiên (chỉ một p)
  • Phần tử div thứ nhất: con p trực tiếp thứ nhất và thứ ba tính từ dưới lên.
  • Phần tử div thứ hai: con p trực tiếp tiếp thứ nhất và thứ ba tính từ dưới lên.
  • Phần tử div cuối cùng: con p trực tiếp vị trí đầu tiên (chỉ một p)

Ví dụ 9: Chọn tất cả các phần tử con p duy nhất (không tồn tại anh em cùng kiểu và khác kiểu) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:only-child").css("background-color", "yellow");

Kết quả

Giải thích kết quả: chỉ có duy nhất phần tử div cuối cùng là có một phần tử con p duy nhất (không có anh em cùng kiểu và khác kiểu).

Ví dụ 10: Chọn tất cả các phần tử con p duy nhất (không tồn tại anh em cùng kiểu) và gán màu nền là vàng, trong tập tin MyjQuery.js viết mã như sau:


$("p:only-child").css("background-color", "yellow");

Kết quả

Giải thích kết quả:

  • Phần tử body: có phần tử p, mặc dù có anh em nhưng không cùng kiểu (h2, div), nên được chọn.
  • Phần tử div cuối cùng: có một p duy nhất nên được chọn.

< Học jQuery