CSS element > element Selector
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 Beginner. </ p > </ div > < p > Beginner 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;" > w3wiki </ h1 > < h2 > CSS element > element Selector </ h2 > < p > A computer science < span > portal for Beginner. </ span > </ p > </ body > </ html > |
Output: Supported Browsers: The browser supported by element > element selector are listed below:
- Apple Safari
- Google Chrome
- Firefox
- Opera