Skip to content Show Công dụng hữu ích từ :nth-child(n) trong CSS. Như các bạn đã biết CSS thật vi diệu phải không nào nó giúp cho chúng ta thay đổi từ hình dáng, màu sắc cho đến chuyển động của các phần tử HTML. Hôm nay Codevivu sẽ chia sẻ cho các bạn thêm về :nth-child(n) trong CSS công dụng và cách sử dụng nó như thế nào.:nth-child(n) trong CSS. Như các bạn đã biết CSS thật vi diệu phải không nào nó giúp cho chúng ta thay đổi từ
hình dáng, màu sắc cho đến chuyển động của các phần tử HTML. Hôm nay Codevivu sẽ chia sẻ cho các bạn thêm về :nth-child(n) trong CSS công dụng và cách sử dụng nó như thế nào. :nth-child(n) trong CSS đây được xem là một bộ chọn trong CSS. Cho phép chúng ta lựa chọn bất kỳ hoặc nhóm các phần tử con trong một phần tử cha. Trong đó (n) có thể là số, từ khóa hay một công thức mang ý nghĩa vị trí của phần tử con. đây được xem là một bộ chọn trong CSS. Cho phép chúng ta lựa chọn bất kỳ hoặc nhóm các phần tử con trong một phần tử cha. Trong đó (n) có thể là số, từ khóa hay một công thức mang ý nghĩa vị trí của phần tử con. Như chúng ta đã biết để chọn phần tử đầu tiên có 2 cách: dùng first-child() và nth-child(n). Trong đó first-child() chúng ta chỉ duy nhất chọn được phần tử đầu tiên trong khi nth-child(n) chúng ta có thể chọn được phần tử ở bất cứ vị trí (n) nào.first-child() và nth-child(n). Trong đó first-child() chúng ta chỉ duy nhất chọn được phần tử đầu
tiên trong khi nth-child(n) chúng ta có thể chọn được phần tử ở bất cứ vị trí (n) nào. Để chọn nhóm các phần tử với vị trí bắt đầu và kết thúc cụ thể chúng ta làm như sau: Khi ta dùng (n+5) thì lúc này (n) lại là một biểu thức. Giả sử chúng ta có 10 phần tử như trên với biểu thức (n+5) thì lúc này phần tử bắt đầu sẽ là phần tử thứ 5 và n sẽ là vị trí các phần tử tiếp theo bắt đầu là 1.(n+5) thì lúc này phần tử bắt đầu sẽ là phần tử thứ 5 và n sẽ là vị trí các phần tử tiếp theo bắt đầu là 1. Ngược với ví dụ trên chọn từ vị trí đầu tiên đến vị trí thứ 5 thì chúng ta làm như sau: Một cách khác hơn là lựa chọn chẳn (Even) và lẻ (Odd). :nth-child cũng hỗ trợ chúng ta 2 thuộc tính của nó là Even và Odd trong dó Even là phần tử chẳn và Odd là phần tử lẻ. Với :nth-child(n) hy vọng sẽ giúp các bạn thêm mẹo hay kiến thức về css. Bài viết Công dụng hữu ích từ :nth-child(n) trong CSS đến đây là hết. Chúc các bạn thành công!.:nth-child(n) trong CSS đến đây là hết. Chúc các bạn thành công!. "Thành công nuôi dưỡng sự hoàn hảo. Sự hoàn hảo lại nuôi lớn thất bại. Chỉ có trí tưởng tượng mới tồn tại." View all posts by Long Phạm
Thành phần độc lập thứ 3
Ta thấy những thành phần ở vị trí thứ 3 có thành phần cha đều đã được chọn.:nth-child(n) { property: value; } 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.<html> <head></head> <body> <p>Thành phần độc lập thứ nhất</p> <p>Thành phần độc lập thứ 2</p> <p>Thành phần độc lập thứ 3</p> <p>Thành phần độc lập thứ 4</p> <p>Thành phần độc lập thứ 5</p> <p>Thành phần độc lập thứ 6</p> <div> <p>Thành phần thứ nhất</p> <p>Thành phần thứ 2</p> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <div>Thành phần thứ 2</div> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> <div> <h4>Thành phần thứ nhất</h4> <ul> <li>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</li> <li>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</li> </ul> <p>Thành phần thứ 3</p> <p>Thành phần thứ 4</p> <p>Thành phần thứ 5</p> <p>Thành phần thứ 6</p> </div> </body> </html> Trang chủCSS viết: 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 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 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ấtul 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 Thành phần thứ nhất
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ấtp:nth-child(3){ color: blue; } 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ứ 2CSS viết: 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 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 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ấtul 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 Thành phần thứ nhất
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. |