CSS-এ :last-child Pseudo-class

CSS :last-child প্সিউডো-ক্লাস একটি এলিমেন্ট সিলেক্ট করে যা অন্য একটি এলিমেন্টের শেষ চাইল্ড এলিমেন্ট।

সিনট্যাক্স

সিনট্যাক্স নিম্নরূপ:

:last-child{    /*ঘোষণা*/ }

CSS last-child Pseudo class এর একটি উদাহরণ দেখি:

উদাহরণ

<!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">Table</th> </tr> <tr> <td>One</td> <td>Two</td> <td>Three</td> <td>Four</td> </tr> <tr> <td>Five</td> <td>Six</td> <td>Seven</td> <td>Eight</td> </tr> </table> </body> </html>

আউটপুট

last-child pseudo class সিলেক্টর ব্যবহার করার আগে:

last-child pseudo class সিলেক্টর ব্যবহার করার পর:

CSS last-child Pseudo class এর আরেকটি উদাহরণ দেখি:

উদাহরণ

<!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>What is PHP?</h2> <ul> <li>PHP is a recursive acronym for "PHP: Hypertext Preprocessor".</li> <li>PHP is a server side scripting language that is embedded in HTML. </li> <li>It is integrated with a number of popular databases, including MySQL, PostgreSQL, Oracle, Sybase, Informix, and Microsoft SQL Server.</li> </ul> </body> </html>

আউটপুট