JSFiddle - React, Tailwind, and code Playground

HTML

<div class="um">
    <p>Primeiro parágrafo com <i>texto itálico</i></p>
    <div>
        <i>texto em itálico</i>        
        <p>Parágrafo dentro do DIV com <i>texto itálico</i></p>
        <p>Outro parágrafo dentro do DIV com <i>texto itálico</i></p>
        <span>Elemento SPAN dentro do DIV com <i>texto itálico</span>    
    </div>
        <i>texto em itálico</i>
</div>
    
    <hr>

<div class="dois">
    <p>Primeiro parágrafo com <i>texto itálico</i></p>
    <div>
        <i>texto em itálico</i>        
        <p>Parágrafo dentro do DIV com <i>texto itálico</i></p>
        <p>Outro parágrafo dentro do DIV com <i>texto itálico</i></p>
        <span>Elemento SPAN dentro do DIV com <i>texto itálico</span>
    </div>
        <i>texto em itálico</i>
</div>

CSS

.um > i { color: red; }
.dois > p > i { color: blue; }
.dois > div > p > i { color: orange; }