I would like to select the first occurrance of <p> after each <h1> and <h2> when all these tags are sibligs (i.e. all belong to the same div). Paragraph does not necessarily follow the header immediately; there could be some images, or tables, or other elements in between. The aim is to then style the first letter of such paragraphs. I do not want to use javascript or jQuery. Is this possible with css selectors only?

For example I would have something like:

<div>
<h1>Bla</h1>
<p class="Testo">BlaBla.</p> <!-- #1 -->
<p class="Testo">BlaBla.</p> <!-- #2 -->
<h2>BlaBlaBla</h2>
<p class="Testo">BlaBla.</p> <!-- #3 -->
<h2>BlaBlaBla</h2>
<div>
    <img>
    <p></p>                  <!-- #4 -->
</div>
<p class="Testo">BlaBla.</p> <!-- #5 -->
</div>

And I would like to select #1, #3 and #5. I am lost by now and appreciate some help.

If I use: h1 + p.Testo:first-letter and h2 + p.Testo:first-letter it does not select #5 because it is not following the header immediately.

If I use: h1 ~ p.Testo:first-letter and h2 ~ p.Testo:first-letter it selects also #2 because that is also a sibling of h1.

If I use h1 > p.Testo:first-letter and h2 > p.Testo:first-letter it selects none of them because they are siblings and not children; same for descendant selector h1 p.Testo:first-letter and h2 p.Testo:first-letter

If I use: h1 ~ p.Testo:first-of-type:first-letter and h2 ~ p.Testo:first-of-type:first-letter it selects only #1...

Edit
Report