CSS | element > element Selector
The element > element selector in CSS is used to style only those elements which are the children of 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:
<!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:
<!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
- Internet Explorer 7.0
Please Login to comment...