<h2>X Y Selector</h3>
<div class="xy-selector">
<div id="xy-container">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li class="warning">Something went Wrong </li>
      <li> List Item 4</li>
   </ul>   
</div>

<p> Paragraph outside of div </p>
</div>

<h2>X + Y Selector</h2>
<div id="adj-container">
  <ul>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>

  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

<h2>X > Y Selector</h2>

<div id="direct-container">
  <ul>
    <li> List Item
      <ul>
        <li> Child </li>
      </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>

  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>

<h2>X ~ Y Selector</h2>
<div id="sib-container">
  <ul>
    <li> List Item
      <ul>
        <li> Child </li>
      </ul>
    </li>
    <li> List Item </li>
    <li> List Item </li>
    <li> List Item </li>
  </ul>

  <p> Lorem ipsum dolor sit amet, <a href="#" title="Some title">consectetur</a> adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur <a href="#">adipisicing</a> elit, sed do eiusmod tempor. </p>
  <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor. </p>
</div>
* {
  font-family: "Lato";
}

h2 {
  margin: 4rem 0 0 0;
}

div.xy-selector div p {
  color: red;
}

div#adj-container ul + p {
  color: red;
}

div#direct-container > ul {
  border: 1px solid black;
}

div#sib-container ul ~ p {
  color: red;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.