<h2>* Selector</h2>
<div class="universal-selector">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
</div>

<h2>#X Selector</h2>
<div id="id-selector">
   <p> My paragraph here. </p>
   <ul>
      <li> List Item 1</li>
      <li> List Item 2</li>
   </ul>

   <ul>
      <li> List Item 3</li>
      <li> List Item 4</li>
   </ul>   
</div>

<h2>.X Selector</h2>
<div id="x-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>

<h2>X Selector</h2>
<div class="xtype-selector">
<div id="xtype-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>

* {
  font-family: 'Lato';
}

h2 {
  margin: 4rem 0 0 0;
}

div.universal-selector * { border: 1px dotted black; }

div#id-selector {
  background: #e3e3e3;
}

div#x-container li.warning {
  color: red;
} 

div.xtype-selector div {
  border: 1px solid black;
}

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.