Các đoạn code css :nth-child(n) quan trọng cần biết.

Các đoạn code css :nth-child(n) quan trọng

HTML CSS thì các bạn chắc cũng biết cần nhớ gì rồi phải không, còn  1 đoạn css này mình hay quên nên tiện viết cho mình nhớ và chia sẻ cho các bạn nào không nhớ giống AD nhé, nếu hay các bạn có thể ủng hộ Cộng Đồng Blog Chúng Tôi Nhé

:nth-child(n) đây được xem là một bộ chọn thông dụng 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 của nó. 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 để css cho đúng vị trí mình mong muốn.

Css :nth-child có nhiều loại rất hưu dụng cho mình dễ tùy biến chúng, ad tóm tắt nhưng cái cần thiết thôi, thiếu gì các bạn để lại comment bên dưới để AD cập nhật thêm nhé.

Các đoạn code css :nth-child(n) quan trọng

1. 1. Lấy Phần Tử Đầu Của Phần Tử Cha Hoặc Vị Trí Mình Muốn :nth-child(1)

      • phần tử 1
      • phần tử 2
      • phần tử 3
      • phần tử 4
      • phần tử 5

   2. Lấy Phần Tử Cuối Cùng Của Phần Tử Cha :nth-last-child(1)

      • phần tử 1
      • phần tử 2
      • phần tử 3
      • phần tử 4
      • phần tử 5

   3. Lấy Phần Tử Từ Vị Trí thứ 3 Trở Lên :nth-child(n+3)

      • phần tử 1
      • phần tử 2
      • phần tử 3
      • phần tử 4
      • phần tử 5

   4. Lấy Phần Tử Từ Vị Trí thứ 3 Trở Xuống :nth-child(-n+3)

      • phần tử 1
      • phần tử 2
      • phần tử 3
      • phần tử 4
      • phần tử 5

   5. Lấy Các Phần Tử Số Chẳn :nth-child(even)

      • phần tử 1
      • phần tử 2
      • phần tử 3
      • phần tử 4
      • phần tử 5

   6. Lấy Các Phần Tử Số Lẻ :nth-child(odd)

      • phần tử 1
      • phần tử 2
      • phần tử 3
      • phần tử 4
      • phần tử 5

Vậy là xong , các bạn chỉ cần nhớ các Các đoạn code css :nth-child(n) quan trọng ở trên là đủ sài rồi, nếu có cái nào hay nữa, các bạn cứ để lại comment AD sẽ cập nhật thêm nhé, chúc các bạn thành công nhé.