Hướng dẫn nth-child css

• Trang chủ
• Tham khảo
• CSS
• CSS3
• :nth-child(n)

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

• ":nth-child(n)" chọn thành phần thứ "n" trong thành phần cha, gốc tính được tính từ thành phần đầu tiên trở đi.
• Thứ tự "n" được tính cho tất cả các thành phần cùng cấp.
• Chỉ chọn thành phần có thành phần cha, những thành phần độc lập sẽ không được chọn.
• Giá trị "n" có thể là số, keyword hay công thức.

Cấu trúc

:nth-child(n) {
    property: value; 
}

Ví dụ

HTML viết:

Thành phần độc lập thứ nhất
Thành phần độc lập thứ 2
Thành phần độc lập thứ 3
Thành phần độc lập thứ 4
Thành phần độc lập thứ 5
Thành phần độc lập thứ 6


    
Thành phần thứ nhất
    
Thành phần thứ 2
    
Thành phần thứ 3
    
Thành phần thứ 4
    
Thành phần thứ 5
    
Thành phần thứ 6



    
Thành phần thứ nhất
    
Thành phần thứ 2
    
Thành phần thứ 3
    
Thành phần thứ 4
    
Thành phần thứ 5
    
Thành phần thứ 6



    
Thành phần thứ nhất
    

        
ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
        
ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
    
    
Thành phần thứ 3
    
Thành phần thứ 4
    
Thành phần thứ 5
    
Thành phần thứ 6

Hiển thị trình duyệt khi chưa có CSS:

Thành phần độc lập thứ nhất

Thành phần độc lập thứ 2

Thành phần độc lập thứ 3

Thành phần độc lập thứ 4

Thành phần độc lập thứ 5

Thành phần độc lập thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

• ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
• ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

CSS viết:

p:nth-child(3){
    color: blue;
}

Hiển thị trình duyệt khi đã có css:

Thành phần độc lập thứ nhất

Thành phần độc lập thứ 2

Thành phần độc lập thứ 3

Thành phần độc lập thứ 4

Thành phần độc lập thứ 5

Thành phần độc lập thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

• ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
• ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Ta thấy những thành phần

ở vị trí thứ 3 có thành phần cha đều đã được chọn.

Trình duyệt hỗ trợ

":nth-child(n)" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• :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:

    
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

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:

    
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

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

là 430px;, nhưng mỗi chiều rộng của
• 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
  , để 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) ...