JSFiddle - React, Tailwind, and code Playground

HTML

<div id="padre">
    <p class="hijo">P1</p>
    <p class="hijo">P2</p>
    <p class="hijo">P3</p>

    <div id="mensajes">
        <h3>Conversación</h3>
        <div class="mensaje">
            <p>Contenido del mensaje...</p>
        </div>

        <div class="mensaje">
            <p>Contenido del mensaje...</p>
        </div>

        <div class="mensaje">
            <p>Contenido del mensaje...</p>
        </div>
</div>

CSS

#padre { background-color: black; }
#padre .hijo { color: white; }
#padre p { text-align: center; } /* esto afectaría a todos los elementos p */
#padre div { background-color: yellow; }
#padre div div { color: red; }
#padre div div p { text-align: left; }

/* Lo siguiente es igual a lo anterior, pero utilizando los id/class
#padre { background-color: black; }
#padre .hijo { color: white; }
#padre p { text-align: center; }
#mensajes { background-color: yellow; }
#mensajes .mensaje { color: red; }
#mensajes .mensaje p { text-align: left; }
*/