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 :first-child Pseudo-class in CSS
The CSS :first-child pseudo-class selects an element that is the first child element of some other element.
Syntax
The following is the syntax of the :first-child pseudo class −
:first-child{
/*declarations*/
}
Example
Let?s see an example of CSS first-child Pseudo class. We have set no left border for the first element of the <td> and <th> −
td:first-child, th:first-child {
border-left: none;
}
Here is 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:first-child, th:first-child {
border-left: none;
}
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>MCA Syllabus</caption>
<tr>
<th colspan="4">Subjects</th>
</tr>
<tr>
<td>C</td>
<td>C++</td>
<td>Java</td>
<td>C#</td>
</tr>
<tr>
<td>MySQL</td>
<td>PostgreSQL</td>
<td>MongoDB</td>
<td>SQLite</td>
</tr>
</table>
</body>
</html>
Example
Let?s see another example of CSS first-child Pseudo class. The background color of the <li> first child is styled −
li:first-child {
background-color: blue;
font-family: cursive;
}
Here is the example −
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-size: 1.1em;
list-style: circle;
}
li:first-child {
background-color: blue;
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>Apache Spark</h2>
<ul>
<li>Apache Spark is a lightning-fast cluster computing technology, designed for fast computation. </li>
<li>It is based on Hadoop MapReduce.</li>
<li>It extends the MapReduce model to efficiently use it for more types of computations.</li>
</ul>
</body>
</html>
Updated on: 2023-12-28T15:21:20+05:30
79 Views
Advertisements