Công Dụng Hữu Ích Từ :nth-child(n) Trong CSS

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.

1. :nth-child(n) trong CSS là gì ?

: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.

2. :nth-child(n) Lựa chọn phần tử đầu tiên

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.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

    ul li:nth-child(5) {
        background:#3498DB
    }

3. :nth-child(n) Lựa chọn nhóm các phần tử

Để 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:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

    ul li:nth-child(n+5) {
        background:#3498DB
    }

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.

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:

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

    ul li:nth-child(-n+5) {
        background:#3498DB
    }

4. :nth-child(n) Lựa chọn phần tử chẳn lẻ

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ẻ.

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

    ul li:nth-child(even) {
        background:#3498DB
    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

    ul li:nth-child(odd) {
        background:#3498DB
    }

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!.