Selects every <ul> element that are preceded by a <p> element with CSS

Use the element ~ element selector to select

    elements preceded by

    element. You can try to run the following code to implement this

    Example

<!DOCTYPE html>
<html>
  <head>
   <style>
     p~ul {
      color: white;
      background-color: blue;
     }
   </style>
  </head>
  <body>
   <h1>Demo Website</h1>
   <h2>Fruits</h2>
   <div>
     <p>Vegetables are good for health.</p>
     <ul>
      <li>Spinach</li>
      <li>Onion</li>
      <li>Capsicum</li>
     </ul>
   </div>
   <p>Fruits are good for health.</p>
   <ul>
     <li>Apple</li>
     <li>Orange</li>
     <li>Kiwi</li>
   </ul>
  </body>
</html>
Updated on: 2020-06-24T07:12:49+05:30

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements