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...