CSS style :nth-child even nested elements

Question

How can I style :nth-child(4n) even with the element is nested inside a div, example here is p inside div:

p:nth-child(2) {
    background: red;
}

<p>The first paragraph.</p>
<div>
  <p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>

@Abhitalks when I do p:nth-of-type(2) { background: red; } I have the third p in red — Rachid Oussanaa, Apr 25 '17 at 10:15
Ooops! I misread the markup in haste. This answer might help you -- http://stackoverflow.com/a/23987180/1355315 — Abhitalks, Apr 25 '17 at 10:22
Possible duplicate of [CSS nth-of-type selector with nested elements](http://stackoverflow.com/questions/23986929/css-nth-of-type-selector-with-nested-elements) — Vucko, Apr 25 '17 at 10:58

score 1 · Answer 1 · answered Apr 25 '17 at 10:55

    .content *:nth-child(2) {
        background: red;
    }

<!-- begin snippet: js hide: false console: true babel: false -->
<div class="content">
    <p>The first paragraph.</p>
    <div>
        <p>The second paragraph.</p>
    </div>
    <p>The third paragraph.</p>
    <p>The fourth paragraph.</p>

    <p><b>Note:</b> Internet Explorer 8 and earlier versions do not support the :nth-child() selector.</p>
</div>

score 1 · Answer 2 · answered Apr 25 '17 at 14:46

1

body p:nth-child(2n) {
    background: red;
}
body div:nth-child(2n) p {
    background: red;
}

<body>
<p>The first paragraph.</p>
<div>
  <p>The second paragraph.</p>
</div>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
<body>

answered Apr 25 '17 at 14:46

Yash Yadav

563
2
9

CSS style :nth-child even nested elements

2 Answers2

Related