CSS Tutorial

CSS Style

CSS Layout Style

CSS Float Style

CSS Reference

CSS All Next Siblings Selector - CSS (~) Sign Selector


What is All Next Siblings Selector?

CSS all next siblings selector matches all element they are siblings of specified element.
This Selector identify by ~ (tilde sign) between two selector element.
All next siblings selected match all elements whose are sibling of specified element.

Browser Compatibility

  • Google Chrome 2+
  • Mozilla Firefox 1+
  • Internet Explorer 9+
  • Opera 9.2+
  • Safari 3.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 thay are siblings of specified <div> element.

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

Example:

Match all <p> element thay are 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 this p element

    <hr />

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

Run it...   »

Example Result: