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
Selecting Child Elements with CSS
CSS provides several combinators to select child elements and descendants of a parent element. The most commonly used are the child combinator (>) and the descendant combinator (space), along with pseudo-selectors like :nth-child().
Syntax
/* Child combinator - selects direct children only */
parent > child { property: value; }
/* Descendant combinator - selects all descendants */
parent descendant { property: value; }
/* nth-child selector - selects specific child position */
element:nth-child(n) { property: value; }
Child Combinator
The child combinator (>) selects only the direct child elements of a parent. It does not select nested descendants beyond the immediate children.
Example
The following example demonstrates how the child combinator selects only direct children −
<!DOCTYPE html>
<html>
<head>
<style>
article > p {
color: white;
background-color: orange;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<article>
<h2>Article Title</h2>
<p>This paragraph is a direct child of article - it gets styled.</p>
<div>
<p>This paragraph is inside a div - it does NOT get styled.</p>
</div>
</article>
<p>This paragraph is outside the article - it does NOT get styled.</p>
</body>
</html>
Only the first paragraph (direct child of article) appears with orange background and white text. The nested paragraph inside the div and the paragraph outside the article remain unstyled.
Descendant Combinator
The descendant combinator (space) selects all descendant elements, including children, grandchildren, and deeper nested elements.
Example
This example shows how the descendant combinator affects all nested elements −
<!DOCTYPE html>
<html>
<head>
<style>
article p {
text-align: center;
border: 3px solid tomato;
padding: 8px;
margin: 5px 0;
}
</style>
</head>
<body>
<article>
<h2>Article Title</h2>
<p>Direct child paragraph - gets styled.</p>
<div>
<p>Nested paragraph inside div - also gets styled.</p>
</div>
</article>
<p>Paragraph outside article - does NOT get styled.</p>
</body>
</html>
Both paragraphs inside the article (direct child and nested in div) appear with centered text and tomato-colored borders. The paragraph outside the article remains unstyled.
The nth-child Selector
The :nth-child() pseudo-selector targets elements based on their position among siblings. You can use numbers, keywords like odd or even, or formulas like 2n+1.
Example
This example demonstrates styling specific child positions −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 10px;
padding: 20px;
}
.child {
width: 50px;
height: 50px;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
.child:nth-child(1) { background-color: #FF8A00; }
.child:nth-child(2) { background-color: #F44336; }
.child:nth-child(3) { background-color: #9C27B0; }
.child:nth-child(4) { background-color: #4CAF50; }
.child:nth-child(odd) { border-radius: 50%; }
</style>
</head>
<body>
<div class="container">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
</div>
</body>
</html>
Four colored boxes appear in a row: orange (1), red (2), purple (3), and green (4). The odd-numbered boxes (1 and 3) are circular, while even-numbered boxes (2 and 4) are square.
Conclusion
CSS combinators provide precise control over element selection. Use the child combinator (>) for direct children only, the descendant combinator (space) for all nested elements, and :nth-child() for position-based styling. These tools are essential for creating well-structured, maintainable stylesheets.
1K+ Views
