nth-child of id element

Question

I would like to highlight 'The second paragraph' of p id="dd". Can I make it with nth-child? When I add "#dd" in styles, it stops to work.

<!DOCTYPE html>
<html>
<head>
<style> 
#dd p:nth-child(3) {
    background: red;
}
</style>
</head>
<body>
<p id="de">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</p>
<p id="dd">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</p>
</body>
</html>

You are trying to apply styles correctly. But your `HTML` is invalid. You can't have a `
` inside another `
`. — Mohammad Usman, Dec 30 '16 at 12:56

score 2 · Answer 1 · answered Dec 30 '16 at 13:01

As Muhammad Usman kindely noted above,

You need to Change the "parent" <p> to a <div> and it will work.

#dd p:nth-child(3) {
  background: red;
}

<div id="de">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>
<div id="dd">
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>

score 2 · Answer 2 · answered Dec 30 '16 at 13:02

p inside a p is not allowed. Make a div and add the paragraphs in it.

https://jsfiddle.net/8fh108cL/

The relevant change in the snippet.

<div id="de">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>
<div id="dd">
<p>The first paragraph.</p>
<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</div>

score 0 · Answer 3 · answered Dec 30 '16 at 13:02

0

You shouldn't append paragraphs inside a paragraph. Please refer to this really good post from Matt Ball.

Your approach is right, you can use #dd:nth-child(n) where n is the child you are targeting with your CSS rules.

answered Dec 30 '16 at 13:02

404answernotfound

763
7
20

nth-child of id element

3 Answers3