CSS Next Sibling Selector - CSS + Sign Selector

What is CSS Next Sibling Selector?

CSS Next Sibling Selector matches all element that are only next sibling of specified element.
This Selector identify by + (plus sign) between two selector element.
Next sibling selected match only one element that are sibling of specified element.

Syntax

This syntax apply to match all <p> element that are only next sibling of specified <div> element.

 div + p {   property: value;   property: value;   ... }

Example

Match all <p> element that are only next sibling of specified <div> element to apply CSS.

 <!DOCTYPE html> <html> <head>   <title>CSS Next Sibling Selector</title>   <style type="text/css">     div + p {       font-size: 24px;     }   </style> </head> <body>    <div>This is division text</div>   <p>This is paragraph text</p>    <hr />    <div>This is another division text</div>   <p>This is first paragraph text</p>   <p>This is second paragraph text</p>  </body> </html>

Browser Compatibility

  • Google Chrome 13+
  • Mozilla Firefox 1+
  • Internet Explorer 8+
  • Opera 9.2+
  • Safari 5.1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.