CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS Next Sibling Selector - CSS + Sign Selector


What is 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.

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.

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.

<style type="text/css">
div + p {
   font-size:24px;
}
</style>
</head>
<body>
    <div>This is division text</div>
    <p>This is paragraph text</p>            // Select only this p element

    <hr />

    <div>This is another division text</div>
    <p>This is first paragraph text</p>      // Select only this p element
    <p>This is second paragraph text</p>
</body>

Run it...   »

Example Result: