CSS :first-child property
The :first-child pseudo-class in CSS targets the first child element of a specified parent element. It allows you to apply styles specifically to the first child, regardless of its type. This is useful for styling elements differently based on their position within a container.
Syntax
parent-selector:first-child {
/* styles */
}
parent-selector: The selector targets the parent element.:first-child: The pseudo-class applies styles to the first child of the parent element.
How It Works
Basic Usage:
- You use
:first-childto apply styles to the first child element of a parent container.
ul li:first-child { font-weight: bold; }- In this example, the first
<li>element within each<ul>will be styled with bold text.
- You use
Compatibility:
- The
:first-childpseudo-class works with any type of element. It’s not limited to specific tags, and it applies based on the element's position as the first child of its parent.
- The
Example
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Child Example</title>
<style>
ul li:first-child {
color: green;
font-weight: bold;
}
ol li:first-child {
color: red;
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>First item (ul)</li>
<li>Second item (ul)</li>
<li>Third item (ul)</li>
</ul>
<ol>
<li>First item (ol)</li>
<li>Second item (ol)</li>
<li>Third item (ol)</li>
</ol>
</body>
</html>
Explanation:
ul li:first-child:- Targets the first
<li>element within each<ul>. This first list item is styled with green text and bold font weight.
- Targets the first
ol li:first-child:- Targets the first
<li>element within each<ol>. This first list item is styled with red text and italic font style.
- Targets the first
Important Points
Type of First Child:
:first-childapplies only if the element is the very first child of its parent. If the parent has other non-element nodes (like text nodes or comments) before the target element,:first-childwill not apply.
<div> <!-- A comment --> <p>This paragraph is the first child.</p> </div>div p:first-child { color: blue; }- In this case, the
:first-childpseudo-class will not apply to<p>because it is preceded by a comment node.
Combination with Other Selectors:
:first-childcan be combined with other pseudo-classes and selectors for more specific styling.
ul > li:first-child { color: green; }- This example targets only
<li>elements that are the direct children of a<ul>and are the first child.
Use in Nested Structures:
- In nested structures,
:first-childwill only apply to the very first child of each parent element.
div > p:first-child { color: red; }- This targets
<p>elements that are the first child of their parent<div>, but not<p>elements that might be deeper in the structure.
- In nested structures,