JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap_page">
<div class="some_other_wrapper">
<article>
  <head>
  <p>
  This text should have its first letter selected
  </p>
  <p>
  This text should NOT have its first letter selected
  </p>
  <main>
  <p>
  This text should NOT have its first letter selected
  </p>
  </main>
  <p>
  This text should NOT have its first letter selected
  </p>
  <p>
  This text should NOT have its first letter selected
  </p>
  <section>
    <p>
  This text should NOT have its first letter selected
  </p>
  </section>
  </head>
  <footer>
    <p>
  This text should NOT have its first letter selected
  </p>
  </footer>
</article>
</div>
<footer>
  <p>
  This text should NOT have its first letter selected
  </p>
</footer>
</div>
<article>
  <p>
   Just to be complete, this one should be selected
  </p>
</article>

CSS

.wrap_main p:first-of-type::first-letter, article p:first-of-type::first-letter {
color: red;
}