Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
The :last-child Pseudo-class in CSS
The CSS :last-child pseudo-class selects an element that is the last child element of some other element. As the name suggests, it will select the last child of its parent. Let us see some examples to implement the :last-child pseudo class.
Syntax
The following is the syntax for the :last-child class −
:last-child{
/*declarations*/
}
Style a table with the :last-child pseudo class
Let?s see an example of the CSS last-child Pseudo class. In this example, we have set a table −
<table>
<caption>Demo</caption>
<tr>
<th colspan="4">Score</th>
</tr>
<tr>
<td>99%</td>
<td>95%</td>
<td>97%</td>
<td>92%</td>
</tr>
<tr>
<td>91%</td>
<td>98%</td>
<td>92%</td>
<td>90%</td>
</tr>
</table>
The table is set with the :last-child selector and a right border is set for the
td:last-child, th:last-child {
border-right: 2px solid black;
}
Example
Let us see the example −
<!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">Score</th>
</tr>
<tr>
<td>99%</td>
<td>95%</td>
<td>97%</td>
<td>92%</td>
</tr>
<tr>
<td>91%</td>
<td>98%</td>
<td>92%</td>
<td>90%</td>
</tr>
</table>
</body>
</html>
Style a list with the :last-child pseudo class
Let?s see another example of the CSS last-child Pseudo class. In this example, we have an unordered list −
<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>
The last child in the unordered list is styled −
li:last-child {
background-color: springgreen;
font-family: "Gigi", Arial;
}
Example
Let us see the example −
<!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>
Updated on: 2023-12-28T15:24:39+05:30
202 Views
Advertisements