Edit Question - KnowledgeHub

Title Body

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>  <p class="Testo">BlaBla.</p>  <h2>BlaBlaBla</h2> <p class="Testo">BlaBla.</p>  <h2>BlaBlaBla</h2> <div> <img> <p></p>  </div> <p class="Testo">BlaBla.</p>  </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 ...

Tags (comma-separated) Cancel