nth-child hoạt động như thế nào

Với đoạn mã CSS trên, phần tử có class .gallery thứ 4 sẽ có thuộc tính margin = 0 (giả sử các phần tử khác margin khác 0).

Sử dụng nâng cao

Bạn có thể sử dụng even (tương ứng với các phần tử chẵn) và odd (tương ứng với các phần tử lẻ) với nth-child. Ngoài ra, bạn còn có thể sử dụng phép tính toán như sau

Với phép tính trên, các phần tử thứ 4, 8, 12... sẽ được áp dụng thuộc tính margin = 0. Vậy n là gì? Bạn có thể hiểu n là một số tự nhiên bắt đầu bằng 0 (số nguyên không âm). Như vậy, 4n+4 sẽ được hiểu là 4*n + 4, và phép tính sẽ như sau:

4*0 + 4 = 4 (phần tử thứ 4)
4*1 + 4 = 4 (phần tử thứ 8)
4*2 + 4 = 4 (phần tử thứ 12)

Với ví dụ trên, bạn có thể sử dụng 4n thay cho 4n + 4 (Trường hợp đầu tiên 4*0 sẽ không khớp với phần tử nào). Ngoài ra còn có thể sử dụng giá trị âm, sitepoint đưa ra một số kết quả tính toán tại đây

Các trình duyệt tương thích

Bạn có thể sử dụng nth-child trên tất cả trình duyệt hiện đại, trừ IE (chưa rõ là IE9 có chạy được không). Với IE bạn có thể sử dụng javascript để chọn thay cho nth-child

Ví dụ

Nếu chưa hiểu, bạn có thể xem demo và thay đổi các giá trị trong ô input để hiểu rõ hơn.

Bài viết tham khảo từ css-trichks , ntus

++++++++++++++

.col-500:nth-child(2n+1) {
background-color: yellow;
}
.col-500:nth-child(2n+1) .row-inner .thumb-image {
float: right;
}
.col-500:nth-child(2n+1) .row-inner .inf-main {
text-align: right;
}