当前位置: 动力学知识库 > 问答 > 编程问答 >

css - select all first occurrances of p after h

问题描述:

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

网友答案:

The "first occurrence of X after H" selector does not exist.

The closest pure-CSS solution is (add class="h" to each of your <h1>, <h2> elements, or repeat the selectors for h1, h2, ..):

Demo: http://jsfiddle.net/dC4sB/1/

.h + p.Testo,
.h + *:not(p.Testo) + p.Testo,
.h + *:not(p.Testo) + *:not(p.Testo) + p.Testo,
.h + *:not(p.Testo) + *:not(p.Testo) + *:not(p.Testo) + p.Testo {
   /* repeat + *:not(p.Testo) for each additional sibling */
    color: red;
}
网友答案:

I am a little late, but for future people looking forward to resolve this, you can actually use css3 pseudo selector ::first-of-type (read more here) like this

p:first-of-type {
    color: #f00;
}

if you want it to be the first within one particular div you can use

div#id_div > p:first-of-type {
    background: #ff0000;
}

and that should do the trick! hope this help anyone still looking for this answer

网友答案:

I know the question is answered, but using sass could be really cool as well

h1, h2, h3, h4
{
    & + p
    {
        color:red;
    }
}

Where & represent the parent element, once compiled it will turn it into

h1 + p { color:red }
h2 + p { color:red }
h3 + p { color:red }
h4 + p { color:red }
网友答案:

Use h + p.Testo:first-letter

Please check out this link I used to find my answer to this situation.

Edit (After careful re-read)

I see now you have attempted that, but you wanted to grab the 5th p which would have been selected by either entering a blank <h> before your requested 5th paragraph or...

h + p.Testo:first-letter, div + p.Testo:first-letter
{
  css code here
}

Sorry, I didn't realize your html layout wasn't following your question...

分享给朋友:
您可能感兴趣的文章:
随机阅读: