CSS element+element Selector
The element + element selector in CSS is used to style every element that is placed immediately after (not inside) the first specified element.
Syntax:
element + element {
//CSS Property
}
Example 1: In the below program the “p + p” selector selects and styles every pair of consecutive paragraph elements. If there are more than 2 consecutive p elements then it styles the last two.
html
<!DOCTYPE html> < html > < head > < title > CSS | element+element Selector </ title > < style > p+p { color: white; background: green; } </ style > </ head > < body style = "text-align: center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > CSS | element+element Selector </ h2 > < p >This is the first paragraph.</ p > < p >This is the second paragraph</ p > < p >This is the third paragraph</ p > < div > < p >This is the fourth paragraph</ p > < p >This is the fifth paragraph.</ p > </ div > </ body > </ html > |
Output:
Example 2:
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:
Supported Browsers: The browser supported by element + element selector are listed below:
- Apple Safari
- Google Chrome
- Firefox
- Opera
Contact Us