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
CSS Child Selector
The CSS child selector (>) is used to select all elements that are direct children of a specified element. It only targets immediate children and does not select nested elements deeper in the hierarchy.
Syntax
parent > child {
property: value;
}
Example
The following example demonstrates how the child selector works −
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: orange;
padding: 10px;
margin: 5px 0;
}
</style>
</head>
<body>
<div>
<p>Para 1 in the div (direct child).</p>
<!-- This paragraph is nested inside span, not a direct child of div -->
<span><p>Para 2 in the div (nested inside span).</p></span>
</div>
<p>Para 3 outside the div.</p>
</body>
</html>
Only "Para 1 in the div (direct child)" will have an orange background with padding, as it is the direct child of the div element. "Para 2 in the div (nested inside span)" and "Para 3 outside the div" remain unstyled.
Key Points
- The child selector only selects direct children, not grandchildren or deeper nested elements
- Use
parent > childsyntax with the greater-than symbol - More specific than the descendant selector (which uses a space)
Conclusion
The CSS child selector is useful when you need to style only the immediate children of an element while excluding deeper nested elements. It provides more precise control over styling compared to the descendant selector.
Updated on: 2026-03-15T12:16:27+05:30
458 Views
Advertisements