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>

Run it...   »

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.