CSS All Next Siblings Selector - CSS ~ Sign Selector

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

Syntax

This syntax apply to match all <p> element they are siblings of specified <div> element.

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

Example

Match all <p> element they are sibling of specified <div> element to apply CSS.

<!DOCTYPE html>
<html>
<head>
  <title>CSS All Next Siblings 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 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.