Hướng dẫn first-child css là gì

First child hay đầy đủ là :first-child Selector là vùng chọn được sử dụng cho danh sách (list) trong CSS. Ở hình trên bạn thấy rõ ràng danh sách có 5 mục, trong đó mục đầu chữ màu xanh nhờ việc ứng dụng :first-child, 4 mục còn lại chữ màu đen như mặc định.

First child trong CSS

Cú pháp CSS của nó có dạng như này:

ul li:first-child {
background-color: #fcc;
font-weight: bold;
..
...
....
}

Khi mình muốn cái liên kết đầu tiên được nhấn mạnh bằng bôi màu vàng, lúc này CSS cho nó như này:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Nói dễ hiểu, :first-child là thuộc tính định dạng hiển thị “cái thằng” đầu tiên trong danh sách hiển thị theo 1 đoạn CSS riêng biệt.

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.

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

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

Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển. là blog chia sẻ kinh nghiệm, thủ thuật về WordPress  và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.

Bài viết này mình sẽ Hướng dẫn cách sử dụng first child trong CSS. Đây là một thuộc tính CSS khá hay ho trong tùy chỉnh danh sách trên trang web.

Bài viết có thể bạn quan tâm: Hướng dẫn cách sử dụng last child trong CSS

MỤC LỤC NỘI DUNG

• 1 Hướng dẫn cách sử dụng first child trong CSS
  • 1.1 Sử dụng :first-child

Hướng dẫn cách sử dụng first child trong CSS

First child trong CSS hay đầy đủ là :first-child Selector là vùng chọn được sử dụng cho danh sách (list) trong CSS. Ở hình trên bạn thấy rõ ràng danh sách có 5 mục, trong đó mục đầu chữ màu xanh nhờ việc ứng dụng :first-child, 4 mục còn lại chữ màu đen như mặc định.

Sử dụng :first-child

Cú pháp CSS của nó có dạng như này:

ul li:first-child {
background-color: #fcc;
font-weight: bold;
..
...
....
}

Một ví dụ ứng dụng cụ thể trên Hocban.vn cho bạn tham khảo: Khi mình muốn cái liên kết đầu tiên được nhấn mạnh bằng bôi màu vàng, lúc này CSS cho nó như này:

.widget ul li:first-child {
background-color: #FFEB3B;
padding-left: 1em;
}

Kết quả ra như này:

Vi du ve dung first child cho danh sach tren Hocbanvn

Bây giờ mình sẽ qua một ví dụ khác có danh sách cụ thể hơn để bạn thực hành theo. Các bạn có thể thay đổi giá trị màu nền background thành giá trị mà bạn muốn, tương tự bạn có thể thêm các thuộc tính khác cho mục đầu tiên tùy ý.

See the Pen
First child trong CSS là gì và hướng dẫn cách sử dụng by Hocban.vn (@hocbanvn)
on CodePen.

Như vậy là qua bài này bạn đã biết được First child trong CSS là gì rồi đúng không nào, với những ví dụ và minh họa trên mình tin chắc bạn sẽ sử dụng được.

About The Author

Tịnh Nguyễn

Học Bạn.vn là blog chia sẻ kinh nghiệm, thủ thuật về WordPress  và Web Development hướng đến người làm web không chuyên | Chủ yếu là giúp mọi người giải quyết các vấn đề nhỏ khi làm web với WordPress | Tịnh Nguyễn cảm ơn anh chị em đã ỦNG HỘ giúp Hocban.vn có thêm nguồn lực để phát triển.

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• :first-child

:first-child là gì?

:first-child thật ra là bộ chọn có từ CSS, nhưng bộ chọn này rất tiện lợi khi bạn muốn reset giá trị của thành phần đầu tiên, đặc biệt là trong danh sách có chứa dữ liệu tự động (như danh sách sử lý bằng PHP & MySQL).

Ví dụ như danh sách bên dưới đây:

HTML viết:

    
Item đầu tiên
    
Item thứ 2
    
Item thứ 3
    
Item thứ 4
    
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 cuối cùng

Nếu muốn điều khiển thành phần "Item đầu tiên", ví dụ thêm background-color, ta có thể sử dụng thêm class, tuy nhiên với :first-child ta có thể dễ dàng điều khiển thành phần đầu tiên này, viết CSS như sau:

First Child trong CSS là gì?

Last Child là gì?

NTH Last Child là gì?

NTH Child () là gì?