- 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ứ 2Thà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]
...