CSS first-of-type of that parent, but not further descendents

Question

I want to select the first p but not the p nested inside blockquote, or any other element.

In other words the first p out of all the child p's but not grandchild p's

<div class="article__body">
  <p>
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
<blockquote>
  <p>
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </p>
</blockquote>
<p>
    It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</div>

CSS (less)

.article__body{
        p:first-of-type{
            background-color:green;
        }
}

Use the `>` combinator. You should seriously consider searching before asking. — Harry, Jan 11 '17 at 13:39
@Banzay: `:first-of-type` is better just in case the outer `p` is not the first child. — Harry, Jan 11 '17 at 13:42
trust me I did, but it's hard to search for something you don't know about yet. thanks for the answer anyway. — bazzlebrush, Jan 11 '17 at 13:50

score 0 · Answer 1 · answered Jan 11 '17 at 13:41

0

Maybe you should try this:

.article_body p:nth-of-type(1){
    background-color:green;
}

or just create a class HTLM: <p class="yourclass"></p>

CSS: .yourclass{background-color:green;}

answered Jan 11 '17 at 13:41

Damon

127
1
2
15

score 0 · Answer 2 · answered Jan 11 '17 at 13:41

0

I try

.article__body p:nth-of-type(1){
            background-color:green;
        }

answered Jan 11 '17 at 13:41

Junior

77
9

CSS first-of-type of that parent, but not further descendents

2 Answers2