What does the “+” (plus sign) CSS selector mean?
The “+” sign selector is used to select the elements that are placed immediately after the specified element but not inside the particular elements.
Note: The IE8 and earlier versions </DOCTYPE> must be declared to work element + element selector.
Syntax:
element + element {
// CSS property
}
Example:
<!DOCTYPE html> <html> <head> <title>+ sign selector</title> <style> h2 + div { font-size:20px; font-weight:bold; display:inline; background-color: yellow; color:green; } h1 { color:green; } body { text-align:center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>+ sign Selector</h2> <div>A computer science portal for geeks</div> </body> </html> |
chevron_right
filter_none
Output:
Supported Browsers: The browser supported by “+” selector are listed below:
- Apple Safari
- Google Chrome
- Firefox
- Opera
- Internet Explorer 7.0
Recommended Posts:
- What is greater-than sign (>) selector in CSS?
- How to create a responsive Modal Sign-Up form for a Website?
- CSS | ::before selector
- CSS | * Selector
- CSS | :not Selector
- CSS | ::after Selector
- CSS | #id Selector
- CSS | :nth-child() Selector
- CSS | [attribute=value] Selector
- CSS | :nth-last-of-type() Selector
- CSS | [attribute$=value] Selector
- CSS | :nth-last-child() Selector
- CSS | :indeterminate Selector
- CSS | Class Selector
- CSS | optional Selector
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
