This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by AMAN GAUR
over 8 years

Confusion regarding the nth-child usage.

HTML code

<html>
<head>
    <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    <title>Result</title>
</head>
<body>
    <!--Add your HTML below!-->
    <h3 class="fancy"> Hello </h3>
          <p class="fancy">First paragraph</p>
          <p id="serious"> Second paragrapah</p>
          <p> Third Paragraph </P>
</body>

CSS Code:- .fancy { font-family: cursive; color: violet; }

#serious { font-family: Courier; color: #8C8C8C; } p:nth-child(4) { font-size: 26px; }

The HTML code uses only 3 paragraphs. The body has 4 child (the h3 element being the first and the rest being the paragraphs).On using the above CSS code(p:nth-child(4),I observed that the text size for the last paragraph was updated.How does that reflect the changes in the 4th child element of paragraph(which does not exist).Wouldn’t body:nth-child(4) update the text size of the 3rd paragraph.Did i misunderstood something? Thanks for helping.

Answer 55fbcf7d86f5522f3100045c

1 vote

Permalink

Somehow pretty much on this forum got the impression that p:nth-child(4) counts only paragraphs, it does not. I am slightly going to change the html code, which hopefully will make more obvious:

<h3>i am a header</h3><!-- h3:first-child or h3:nth-child(1) -->
<p>i am a paragraph</p><!-- p:nth-child(2) -->
<h4>i am a header</h4><!-- h4:nth-child(3) -->
<p>i am a paragraph</p><!-- p:nth-child(4) or p:last-child -->

as you can see, each html element is included in the count. But what would happen if i did: p:nth-child(3)? nothing, the third element is not a paragraph, it is h4. You need to see nth-child more like a if statement, in case of p:nth-child(2), if the second element is a paragraph, apply css, otherwise do not apply css. (by css i mean what is between the curly bracket ({}) of p:nth-child(2) )

Sometimes i wish my English was better, i hope i made it clear. And now i want to teach you something, there is also [nth-of-type][1] selector, which works by only counting the specified elements, so p:nth-of-type(3) would affect the paragraph you needed in the lesson (but won’t pass the exercise, SCT won’t like it)

Here is the html code i posted earlier but now with nth-of-type:

<h3>i am a header</h3><!-- h3:first-child or h3:first-of-type -->
<p>i am a paragraph</p><!-- p:nth-child(2) or p:first-of-type -->
<h4>i am a header</h4><!-- h4:nth-child(3) or h4:first-of-type -->
<p>i am a paragraph</p><!-- p:last-child or p:last-of-type -->

Hope this help, i hope didn’t create to much confusion with the introduction of nth-of-type. [1]: https://developer.mozilla.org/en/docs/Web/CSS/:nth-of-type

points
Submitted by stetim94
over 8 years

Answer 55faf2169113cba2e600002e

0 votes

Permalink

when selecting childs from the parent it is set like this:

body> = parent

< h3> = child 1 < p> = child 2 < p> = child 3 < p> =child 4

points
Submitted by LY15
over 8 years

1 comments

AMAN GAUR over 8 years

True. But in the above code i changed the text size by using p:nth-child(4). Your thoughts on this ? Thanks LY15

Answer 55fb69a651b8878c2b000479

0 votes

Permalink

I don’t think I’m understanding… I’ll bring it down on what I’m thinking:

you changed the text size by using “p:nth-child(4)” yes you have by using the code/syntax of: p:nth-child(4) { font-size:26px; }

so yup by saying you wanted the 4th child to have a font size of 26px allowed the change to happen. Since the 4th child of the syntax is < p>third paragraph< /p> which is also your last paragraph.

However if you are saying if there was a non-value child lets say p:nth-child(5), in this case only childs1 to 4 exist. In which 5 would not happen nor go to child 4..

Welp I’m out of idea, hope that helped ya.

points
Submitted by LY15
over 8 years