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.
<!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;"> GeeksforGeeks </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 forth paragraph</p> <p>This is the fifth paragraph.</p> </div> </body> </html> |
Output:
Example 2:
<!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:
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...