Lớp giả :last-child trong CSS chọn một phần tử là phần tử con cuối cùng của phần tử khác.
Cú pháp
Cú pháp như sau:
:last-child{ /*khai báo*/ }
Ví dụ cho lớp giả CSS last-child:
Ví dụ
<!DOCTYPE html> <html> <head> <style> table { margin: auto; padding: 10px; border: hsl(54, 100%, 50%) solid 13px; border-radius: 6px; text-align: center; } td, th { border-left: 2px solid black; border-top: 3px solid black; } td:last-child, th:last-child { border-right: 2px solid black; } th { background-color: lightblue; border-top: none; } caption { margin-top: 3px; background-color: purple; caption-side: bottom; color: white; border-radius: 20%; } </style> </head> <body> <table> <caption>Demo</caption> <tr> <th colspan="4">Bảng</th> </tr> <tr> <td>Một</td> <td>Hai</td> <td>Ba</td> <td>Bốn</td> </tr> <tr> <td>Năm</td> <td>Sáu</td> <td>Bảy</td> <td>Tám</td> </tr> </table> </body> </html>
Kết quả
Trước khi dùng bộ chọn lớp giả last-child:
Sau khi dùng bộ chọn lớp giả last-child:
Ví dụ khác cho lớp giả CSS last-child:
Ví dụ
<!DOCTYPE html> <html> <head> <style> * { font-size: 1.1em; list-style: circle; } li:first-child { background-color: seashell; font-family: cursive; } li:nth-child(2) { background-color: azure; font-family: "Brush Script Std", serif; } li:last-child { background-color: springgreen; font-family: "Gigi", Arial; } </style> </head> <body> <h2>PHP là gì?</h2> <ul> <li>PHP là viết tắt đệ quy cho "PHP: Hypertext Preprocessor".</li> <li>PHP là ngôn ngữ kịch bản phía máy chủ được nhúng trong HTML. </li> <li>Nó tích hợp với nhiều cơ sở dữ liệu phổ biến, bao gồm MySQL, PostgreSQL, Oracle, Sybase, Informix, và Microsoft SQL Server.</li> </ul> </body> </html>
Kết quả
