CSS element > element Selector
Last Updated :
03 Aug, 2023
The element > element selector in CSS is used to style only those elements which are the children of the specific parent. The operand on the left of > is the parent and the operand on the right is the children element.
Note: Elements that are not directly a child of the specified parent, are not selected.
Syntax:
element1 > element2 {
//CSS Property
}
Example 1: In this example, we are using the above-explained method.
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS element>element Selector
</title>
<style>
div>p {
color: white;
background: green;
padding: 2px;
}
</style>
</head>
<body style="text-align: center;">
<div>
<h2 style="color:green;">
CSS element > element Selector
</h2>
<p>
A computer science portal for geeks.
</p>
</div>
<p>
Geeks Classes is a quick course to cover
algorithms questions.
</p>
<p>
This paragraph will not be styled.
</p>
</body>
</html>
|
Output: 
Example 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS element > element Selector
</title>
<style>
p>span {
color: white;
background: green;
}
</style>
</head>
<body style="text-align: center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS element > element Selector
</h2>
<p>
A computer science
<span>
portal for geeks.
</span>
</p>
</body>
</html>
|
Output: 
Supported Browsers: The browser supported by element > element selector are listed below:
- Apple Safari
- Google Chrome
- Firefox
- Opera
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...