This forum is now read-only. Please use our new forums! Go to forums
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
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
Answer 55faf2169113cba2e600002e
Answer 55fb69a651b8878c2b000479
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.
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
1 comments
True. But in the above code i changed the text size by using p:nth-child(4). Your thoughts on this ? Thanks LY15