E ~ F

Matches any F element preceded by an E element. (Source: W3C)

HTML:

  1. <div>
  2. <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
  3. <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit</blockquote>
  4. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
  5. <blockquote>Lorem ipsum dolor sit amet, consectetur adipisicing elit</blockquote>
  6. </div>

CSS:

  1. p{font-style:normal}
  2. blockquote{margin:5px;padding:5px;border:1px solid #ccc}
  3. p ~ blockquote{font-style:italic}

Output:

Lorem ipsum dolor sit amet, consectetur adipisicing elit
Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit

In the example, the second blockquote should be set in italics.