Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>General Sibling Selector Example</title>
  </head>
  <body>
    
    <p>This example demonstrates the use of a CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors">General Sibling</a> selector. Here we want to add a specific style to any paragraphs that follow an image. However, with general sibling selectors the targeted selector (sibling) does not have to immediately follow the reference selector. <p>
    
    <h4>The following paragraph will NOT be selected </h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias beatae blanditiis inventore, ducimus atque dolores vitae accusamus quas deleniti illum ab natus similique distinctio optio. Sed fugit harum, sequi ducimus?</p>
​
    <img src="https://placeimg.com/200/200/arch" alt="" />
    
    <h4>These paragraphs will be selected </h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio consequatur debitis eveniet iste ratione quibusdam hic accusamus! Eveniet dignissimos ad, nihil molestiae aspernatur consequuntur officia voluptatum tenetur velit voluptate. Temporibus! </p>
​
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas temporibus facere, porro et. Sed corrupti iusto reprehenderit ratione est deleniti molestias inventore consequuntur dicta tenetur! Animi excepturi quae blanditiis cum.</p>
  </body>
</html>
 
img ~ p {
  background-color: #FEF0B6;
  padding: 5px;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x