CSS :nth-child – Hướng Dẫn Hoàn Chỉnh

CSS selector :nth-child() áp dụng style cho element tại vị trí cụ thể trong nhóm. Thường dùng style list item đặc biệt, như mỗi item thứ 2 hoặc thứ 3.

Khi design website, có thể muốn style chỉ một tập con element trong container. Ví dụ: style mỗi element thứ 2 trong list, hoặc hàng thứ 3 trong table.

Đó là lúc :nth-child pseudo-class xuất hiện. Nó match element dựa trên vị trí trong danh sách item trên HTML page.

Tutorial thảo luận cơ bản pseudo-class và cách dùng :nth-child với ví dụ. Đọc xong bạn sẽ expert dùng :nth-child select element trên web page.

CSS Pseudo-Classes

Trong CSS, selector chọn element cụ thể để apply style. Ví dụ: selector đổi text color tất cả <p> thành xanh lá.

Có thể chỉ muốn style element ở trạng thái cụ thể. Pseudo-class cho phép apply style chỉ khi element ở trạng thái đó.

CSS :nth-child Pseudo-Class

:nth-child áp dụng style cho element trong nhóm. Có thể style element cụ thể theo vị trí hoặc nhiều element. Rule phổ biến: tô màu element vị trí lẻ/chan trong list.

Cú pháp :nth-child:

li:nth-child(2) { color: lightblue; }

Phân tích:

• li – element áp dụng style.
• nth-child – selector match element.
• 2 – formula match element dùng nth-child.

Trong trường hợp này: style cho mỗi <li> thứ 2 trong list.

Giá Trị Chấp Nhận Của :nth-child

:nth-child chấp nhận 2 loại giá trị:

1. Keyword values (có formula mặc định):
   • odd: chọn element vị trí lẻ.
   • even: chọn element vị trí chẵn.
2. Custom formula chỉ định element pseudo-class select:
   • :nth-child(6): chọn element thứ 6.
   • :nth-child(n+2): chọn element thứ 2 và tất cả sau đó.
   • :nth-child(4n): chọn tất cả element bội số của 4.

n = vị trí item xuất hiện trong list.

Nắm cơ bản, xem ví dụ :nth-child thực tế.

Ví Dụ CSS :nth-child

:nth-child Table

Dùng phổ biến: select row trong table.

Giả sử design website cho cooking club local. Club yêu cầu table recipe spiced hot chocolate. Mỗi hàng thứ 2 highlight hồng đậm (màu chủ đạo club).

Code:

<html> 
  <table> 
    <tr> <th>Ingredient</th> <th>Quantity</th> </tr> 
    <tr> <td>Skimmed Milk</td> <td>250 mls</td> </tr> 
    <tr> <td>75% Dark Chocolate</td> <td>Two squares (10g)</td> </tr> 
    <tr> <td>Cinnamon</td> <td>A pinch</td> </tr> 
    <tr> <td>Honey</td> <td>1 tsp</td> </tr> 
  </table> 
  <style> 
    tr:nth-child(even) { background-color: hotpink; } 
  </style>

Bấm Run để xem output.

Table 2 cột, 5 hàng (1 header). Cột 1: ingredient, cột 2: quantity. CSS: tr:nth-child(even) → background hot pink cho hàng chẵn.

Đọc thêm guide to HTML tables.

:nth-child List

Dùng phổ biến khác: highlight item trong list.

Giả sử list tên thành viên cooking club. 3 tên đầu màu xanh nhạt (vì giữ chức vụ).

Code:

<html> 
  <ul> 
    <li>Chad Bakersfield</li> 
    <li>Laura Patel</li> 
    <li>Eddie Mahoney</li> 
    <li>Edna Jamieson</li> 
    <li>Lesley Spencer</li> 
    <li>James Moffat</li> 
    <li>Olivia Lindsay</li> 
  </ul> 
  <style> 
    li:nth-child(-n+3) { color: lightblue; } 
  </style>

Bấm Run để xem output.

<ul> unordered list, <li> 7 tên. CSS: li:nth-child(-n+3) chọn 3 <li> đầu. Formula -n+3 chọn 3 phần tử đầu. Text color → light blue.

Đọc thêm HTML lists guide.

Kết Luận

:nth-child selector cho phép chọn element dựa trên vị trí trong nhóm để apply CSS style.

Tutorial thảo luận cơ bản pseudo-class và cách dùng :nth-child với 2 ví dụ. Bạn đã sẵn sàng dùng :nth-child như professional web developer!

Muốn học thêm CSS? Xem How to Learn CSS guide – top learning tips và guidance tìm best CSS resources/courses.