CSS :last-child pseudo-class เลือกองค์ประกอบที่เป็นองค์ประกอบลูกสุดท้ายขององค์ประกอบอื่นๆ
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
:last-child{
/*declarations*/
} มาดูตัวอย่างคลาส Pseudo CSS Last-Child กัน −
ตัวอย่าง
<!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> ผลลัพธ์
ก่อนใช้ตัวเลือกคลาสหลอกลูกสุดท้าย -
หลังจากใช้ตัวเลือกคลาสหลอกลูกสุดท้าย -
มาดูตัวอย่างอื่นของ 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> ผลลัพธ์
