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
-
Economics & Finance
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 its parent. This selector is commonly used to apply special styling to the first item in a list, the first paragraph in a section, or the first cell in a table row.
Syntax
:first-child {
/* CSS declarations */
}
Example 1: Styling First Table Cell
Let's see an example where we remove the left border from the first cell in each table row −
<!DOCTYPE html>
<html>
<head>
<style>
table {
margin: auto;
padding: 10px;
border: 3px solid #007acc;
border-radius: 6px;
text-align: center;
border-collapse: separate;
}
td, th {
border-left: 2px solid black;
border-top: 3px solid black;
padding: 8px;
}
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%;
padding: 5px;
}
</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>
A table with a blue border appears. The first cell in each row has no left border, while other cells have a black left border. The header has a light blue background and the caption appears at the bottom with purple background.
Example 2: Styling First List Item
The following example applies special styling to the first list item −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
ul {
list-style-type: circle;
font-size: 1.1em;
}
li {
padding: 8px;
margin: 5px 0;
}
li:first-child {
background-color: #4CAF50;
color: white;
font-weight: bold;
border-radius: 5px;
}
li:nth-child(2) {
background-color: #e3f2fd;
border-radius: 5px;
}
li:last-child {
background-color: #fff3e0;
border-radius: 5px;
}
</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>
A heading "Apache Spark" appears followed by a bulleted list. The first list item has a green background with white text and bold formatting. The second item has a light blue background, and the third item has a light orange background.
Conclusion
The :first-child pseudo-class is a powerful selector for targeting the first child element within its parent container. It's particularly useful for removing unwanted borders, applying special formatting, or creating visual hierarchy in lists and tables.
Updated on: 2026-03-15T14:08:09+05:30
90 Views
Advertisements