:nth-child

:nth-child là gì?

:nth-child thường được sử dụng để xử lý các Item có điều kiện thứ tự cố định trong danh sách có.

Ví dụ như danh sách bên dưới đây, ta cần các Item có thứ từ 3,6,9 có background-color:

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<ul>
    <li>Item đầu tiên</li>
    <li>Item thứ 2</li>
    <li>Item thứ 3</li>
    <li>Item thứ 4</li>
    <li>Item thứ 5</li>
    <li>Item thứ 6</li>
    <li>Item thứ 7</li>
    <li>Item thứ 8</li>
    <li>Item cuối cùng</li>
</ul>
</body>
</html>

Hiển thị trình duyệt:

  • Item đầu tiên
  • Item thứ 2
  • Item thứ 3
  • Item thứ 4
  • Item thứ 5
  • Item thứ 6
  • Item thứ 7
  • Item thứ 8
  • Item cuối cùng

Bây giờ ta sẽ sử dụng :nth-child để thêm background-color cho các Item như mong muốn như sau.

CSS viết:

ul li:nth-child(3n) {
    background-color: #fcc;
}

Chú ý giá trị (3n), n sẽ tăng từ 1 cho tới hết danh sách, 3n tức là 3 lần lượt nhân cho 1,2,3,4,..., khi này các Item được chọn sẽ có thứ tự là 3,6,9, ...

Hiển thị trình duyệt:

  • Item đầu tiên
  • Item thứ 2
  • Item thứ 3
  • Item thứ 4
  • Item thứ 5
  • Item thứ 6
  • Item thứ 7
  • Item thứ 8
  • Item cuối cùng

Ví dụ thêm

Giả sử ta có một danh sách item được float theo chiều ngang như sau:

HTML viết:

<!DOCTYPE HTML>
<html>
<head></head>
<body>
<ul>
    <li>Item đầu tiên</li>
    <li>Item thứ 2</li>
    <li>Item thứ 3</li>
    <li>Item thứ 4</li>
    <li>Item thứ 5</li>
    <li>Item thứ 6</li>
    <li>Item thứ 7</li>
    <li>Item thứ 8</li>
    <li>Item thứ 9</li>
    <li>Item thứ 10</li>
    <li>Item thứ 11</li>
    <li>Item cuối cùng</li>
</ul>
</body>
</html>

CSS viết:

ul {
    border: 1px solid #ccc;
    width: 430px;
}

ul li {
    background-color: #f1f1f1;
    float: left;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 100px;
}

Hiển thị trình duyệt:

  • Item đầu tiên
  • Item thứ 2
  • Item thứ 3
  • Item thứ 4
  • Item thứ 5
  • Item thứ 6
  • Item thứ 7
  • Item thứ 8
  • Item thứ 9
  • Item thứ 10
  • Item thứ 11
  • Item cuối cùng

Ta thấy, chiều rộng của <ul> là 430px;, nhưng mỗi chiều rộng của <li> là (100px + 10px) = 110px, do đó mỗi hàng không thể chứa được 4 Item, vì 110 x 4 = 440px lớn hơn chiều rộng của <ul>, để giải quyết vấn đề này, ta sẽ reset các Item có thứ tự 4,8,12 bằng cách sử dụng :nth-child như sau:

CSS viết:

ul {
    border: 1px solid #ccc;
    width: 430px;
}

ul li {
    background-color: #f1f1f1;
    float: left;
    text-align: center;
    margin-bottom: 10px;
    margin-right: 10px;
    width: 100px;
}
ul li:nth-child(4n) {
    margin-right: 0;
}

Ta đã thêm đoạn CSS reset lại margin-right: 0; cho "Item cuối cùng", ta được kết quả sau:

Hiển thị trình duyệt:

  • Item đầu tiên
  • Item thứ 2
  • Item thứ 3
  • Item thứ 4
  • Item thứ 5
  • Item thứ 6
  • Item thứ 7
  • Item thứ 8
  • Item thứ 9
  • Item thứ 10
  • Item thứ 11
  • Item cuối cùng

Tới đây ta đã biết cách sử dụng thuộc tính :nth-child như thế nào rồi, các bạn có thể có nhiều cách hiệu quả hơn nữa nếu sử dụng điều kiện bên trong dấu ngoặc hợp lý, VD: (2n + 1) hoặc (3n + 2) ...

:last-child

border-radius