CSS3 guide: 3.1. General Sibling Combinator

This is a post in a series, please see the Table of Contents [webmasterworld.com] for the other posts in the series.

3.1. General Sibling Combinator

The General Sibling Combinator [w3.org] is somewhat like the Adjacent Sibling Combinator [w3.org] -

E+F

- we know from CSS2.1 (it was not supported by IE6, so is not widely used).

Syntax: E ~ F

in the same parent

Example:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>General Sibling Combinator Selector Test</title>
   <style type="text/css">
    div {
     border: 1px solid black;
     margin: 10px 0;
    }
    div div {
     border: 1px solid red;
    }
    p {
     margin: 10px ;
    }
    ul ~ p {
     background: yellow;
    }
   </style>
<!--[if lt IE 7]>
   <script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js"
   type="text/javascript"></script>
<![endif]-->
 </head>
 <body>
  <div>
   <p>without background, it's before the &lt;ul&gt;</p>
   <ul>
    <li>list</li>
    <li>list</li>
   </ul>
   <p>yellow background</p>
   <div>
    <p>without background, it's not in the same parent</p>
   </div>
   <p>yellow background it's a sibling of the &lt;ul&gt;
   in the same parent. The div in between does not interrupt
   that relationship</p>
  </div>
  <div>
   <p>without background, it's not in the same parent</p>
  </div>
 </body>
</html>

Support:

Very widely supported in browsers in use today, including IE7
not supported by IE6

Graceful fallback:
IE6 lack of support can be fixed by using IE7.js [code.google.com] making this usable if we want to.

Practical use:
could be used to style the main content differently based on the presence of an ad or an illustration or so. Allowing for greater separation between content and style.

CSS3 guide: 3.1. General Sibling Combinator

swa66

swa66

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week