Ứng dụng CSS :nth-last-child :first-child và :last-child

- [tintuc]Trong ngôn ngữ CSS có đếm thứ tự cho chúng để sử dụng cho các thứ tự HTML

Ứng dụng CSS :nth-last-child :first-child và :last-child
Ứng dụng CSS :nth-last-child :first-child và :last-child

Ví dụ đoạn HTML như sau

<div id='menu'>
<ul>
<li> <a href='#'> Nội dung của li 1 </a> </li>
<li> <a href='#'> Nội dung của li 2 </a> </li>
<li> <a href='#'> Nội dung của li 3 </a> </li>
<li> <a href='#'> Nội dung của li 4 </a> </li>
<li> <a href='#'> Nội dung của li 5 </a> </li>
<li> <a href='#'> Nội dung của li 7 </a> </li>
<li> <a href='#'> Nội dung của li 8 </a> </li>
<li> <a href='#'> Nội dung của li 9 </a> </li>
<li> <a href='#'> Nội dung của li 10 </a> </li>
</ul>
</div>

Ví dụ cho các trường hợp

:nth-last-child(xn + hoặc - y) và :first-child và :last-child các cách ứng dụng

Ví dụ 1: Ta viết CSS như sau

#menu ul li{color:red}
Ngay lặp tức nội dung trong thẻ <li>  </li> nhận giá trị màu chữ là red (màu đỏ) cả 10 thằng.

Kết quả 1
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Ví dụ 2: Ta viết Css :nth-last-child(3)

#menu ul li a:nth-last-child(3){color:red}

Kết quả 2:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Ví dụ 3: Ta viết Css :first-child (giá trị đầu tiên)

#menu ul li:first-child{color:red}

Kết quả 3:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Ví dụ 3: Ta viết Css :first-child và :nth-last-child(1)

#menu ul li:first-child{color:red} = Chữ màu đỏ
#menu ul li:nth-last-child(1){color:blue} = Chữ màu xanh


Kết quả 3:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Có nghĩa rằng #menu ul li:first-child{color:red}#menu ul li a:nth-last-child(1){color:blue} đều gán CSS cho thằng thẻ <li> đầu tiên nhưng :first-child sẽ có giá trị mạnh hơn :nth-last-child(1) nên sẽ cho ra màu đỏ

Ví dụ 4: Ta viết Css :nth-last-child(10) và  :last-child

#menu ul li:last-child{color:red} = Chữ màu đỏ
#menu ul li:nth-last-child(10){color:blue} = Chữ màu xanh


Kết quả 4:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Tương tự thì :last-child sẽ có giá trị mạnh hơn :nth-last-child(10) nên cho ra màu đỏ

Ví dụ 5: Ta viết Css :nth-last-child(2n+1)

#menu ul li:nth-last-child(2n+1){color:red}
  • Với n có giá trị không âm khi đó ta thay n {0,1,2,3,4,5,6..... [+vô cùng] }
  • Tương ứng :nth-last-child(1), :nth-last-child(3), :nth-last-child(5)
=> Lúc này sẽ ra toàn con số lẻ :nth-last-child{1,3,5,7,9.......2n+1} = :nth-last-child(odd)

Với odd (số lẻ)

Kết quả 5:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Tương tự:

Ví dụ 6: Ta viết Css :nth-last-child(2n)

#menu ul li:nth-last-child(even){color:red} or #menu ul li:nth-last-child(2n){color:red}
Lấy thứ tự chẳn {2,4,6,8,10.......2n}

Kết quả 6:
Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Ví dụ 7: Ta viết Css :nth-last-child(3n+1)

#menu ul li:nth-last-child(3n+1){color:red}
Sẽ ra thứ tự {1,4,7........3n+1}

Kết quả 7:

Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Ví dụ 8: Ta viết Css :nth-last-child(n+5)

#menu ul li:nth-last-child(n+5){color:red}

Kết quả 8:

Nội dung của li 1
Nội dung của li 2
Nội dung của li 3
Nội dung của li 4
Nội dung của li 5
Nội dung của li 6
Nội dung của li 7
Nội dung của li 8
Nội dung của li 9
Nội dung của li 10

Rút lại ta có công thức

:nth-last-child(xn ± y)

Với x,y là con số không âm (Chạy từ 0,1,2,3.....+vô cùng)

[/tintuc]
Huỳnh Phụng Blogger

TLQT là Blog chia sẻ kiến thức về Marketing, Digital Marketing, Kinh nghiệm làm SEO, Tối ưu Website và nhiều thứ khác

Đăng nhận xét

➔ Gửi kèm hình ảnh trên bài viết để được hỗ trợ tốt nhất.
➔ Để bình luận kèm hình ảnh, bạn vào trang Upload Ảnh, kéo thả để Upload hình ảnh lên.
➔ Bạn dán URL link hình ảnh vào khung bình luận và ấn Xuất bản, ảnh sẽ được tự động tải lên.
➔ Không spam trong khung bình luận, hạn chế viết tắt.
➔ Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin

Mới hơn Cũ hơn

POST ADS1

POST ADS 2