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...