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>Adjacent Sibling Selector example</title>
  </head>
  <body>
    <p>This example demonstrates the use of CSS <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Adjacent Sibling</a> selectors. Here, we want to add some additional styling to the caption text only. We'll use the adjacent sibling combinator to only select the paragraph tags that directly follow an image.</p>
​
    <img src="https://images.nga.gov/?service=asset&action=show_preview&asset=135937"</img>
    <p>Vincent van Gogh Green Wheat Fields, Auvers 1890 Painting</p>
​
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut 
      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
      in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </p>
​
    <img src="https://images.nga.gov/?service=asset&action=show_preview&asset=120079"</img>
    <p>Claude Monet The Japanese Footbridge 1899 Painting</p>
​
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et 
      dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
      laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
      in voluptate velit esse cillum dolore eu fugiat nulla pariatur
    </p>
​
  </body>
</html>
 
body {
  font-family: Arial, sans-serif;
  line-height: 1.45;
  color: #333;
  padding: 16px;
  font-size: 18px;
}
​
img + p { 
  font-style: italic;
  margin: 0;
  font-size: 14px;
}
Output

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

Dismiss x