JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<div>
    <p class="some_class">Some text here</p>     <!-- Selected [1] -->
    <blockquote>
        <p class="some_class">Not selected</p> <!-- Not selected [2] -->
    </blockquote>
     <p class="some_class">other Some text here</p>     <!-- Selected [1] -->
</div>
<!--  comment above or bottom to see how > and + work in css -->

<div>
  <p>I'm a paragraph</p>
  <p>I get selected!</p>
</div>

<div>
  <p>I'm a paragraph</p>
  <h2>Monkey hair</h2>
  <p>I will NOT get selected</p>
</div>

CSS

div > p.some_class{
color:red;
}

p + p {
  background: yellow;
}