CODEWITHSUNDEEP
htmlcss
John
John

Reputation: 11

debug for HTML/CSS in Codecademy

Here's where I'm stuck: I'm having trouble with an nth-child statement. Here's the HTML and the CSS. I'm in "CSS Selectors 23/23" lesson of Codecademy and can't advance until I figure this out:

HTML:
<body>
<h3 class="fancy">Blah Blah Blah </h>
 <p class="fancy">Blabbidy Blah</p>
 <p id="serious">Bling Bling</p>
 <p> problem child</p>
</body>

CSS:
body :nth-child(4) {
font-size: 26px;
}

Upvotes: 1

Views: 793

Answers (3)

Paulie_D
Paulie_D

Reputation: 114990

Your problem is caused by the failure to close the h3 tag.

Simply adjust/correct that and the existing selector works just fine.

body :nth-child(4) {
  font-size: 26px;
  color: red;
}
<h3 class="fancy">Blah Blah Blah </h3>
<p class="fancy">Blabbidy Blah</p>
<p id="serious">Bling Bling</p>
<p>problem child</p>

Failure to close the tag causes the browser to do it for you after the rest of the elements as you can see in this JSFIDDLE. Accordingly there is no 4th child of the body and the selector fails.

Upvotes: 0

AnnieMac
AnnieMac

Reputation: 862

You should be selecting the p element

p:nth-child(4) {
  font-size: 26px;
}
<body>
  <h3 class="fancy">Blah Blah Blah </h3>
 <p class="fancy">Blabbidy Blah</p>
 <p id="serious">Bling Bling</p>
 <p> problem child</p>
</body>

Upvotes: 1

Okku
Okku

Reputation: 7819

The body:nth-child(4) selector selects the fourth sibling of body - which there is none of. You want to be selecting the p element instead. Notice also that there shouldn't be a space between the element-selector and the pseudo-selector. Finally, your h3 element isn't closed correctly.

Maybe somehting like this is what you were after:

p:nth-child(4) {
  font-size: 26px;
}
<body>
  <h3 class="fancy">Blah Blah Blah </h3>
  <p class="fancy">Blabbidy Blah</p>
  <p id="serious">Bling Bling</p>
  <p>problem child</p>
</body>

Upvotes: 1

Related Questions