Nth Child Conceptual Issues


#1



I'm just having trouble reconciling how the pseudo class selector "p.nth-child" makes logical sense.

In the section on "Branching," I came to understand that an immediate child is any element nestled directly below the parent. For example, since all the "p" tags are nestled directly below "body" they are all considered an immediate child; i.e., they should all be selected with "p:first-child." However, this is obviously not how it works.

I would have thought that "p:nth-child(2)," for example, might select a paragraph(s) nestled within a div, nestled within the body--not the 2nd paragraph in a succession of paragraphs.

I understand how the actual function of "p:nth-child()" is useful; however, my brain doesn't find the logic of it palatable. Any conceptual explanation that can help me get over this feeling would be appreciated!


<!DOCTYPE html>
<html>
	<head>
		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
		<title></title>
	</head>
	<body>
			<p>I'm the first child!</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>
			<p>We're not.</p>			
	</body>
</html>


#2

Even though it is a pseudo-class, :nth-child() by itself is a plain selector. It can target any element in the DOM tree, to any depth the same way a type selector can.

It can select the first to the nth child element in all children, direct or descendant, regardless of type. Where it gets more specific is when it is a descendant of a type, or a child of a certain type.

p:nth-child(6)

targets only P-Nodes (paragraphs) that are the 6th child of their parent. Not only is it the sixth child, it is also a P element. If the parent has other containers with six or more children, P being the sixth, they will be in the scope of the selector, as will containers in those containers with six or more children, P being the sixth..

ul :nth-child(6)

is nearly the equivalent of,

li:nth-child(6)

The latter specifically targets list items only, the former targets any sixth child in any container that is a descendant of the parent UL. That could be list items (LI), paragraphs, divisions (DIV), etc. But it does have one thing specific, unordered lists, only. Not OL (ordered lists). The latter will target list items in both lists.

As far as using a body selector, that would only be targeting the body element, specifically, though some of the properties may be inherited by children, font for instance. font-size gets tricky, though, especially if the body has a size that is not 100%. That topic is for another day.

p {

}

The above selector rule applies to the entire document. Any paragraph nested anywhere at any depth will be affected by this rule.

Say we want the first paragraph anywhere in the document to be indented, but not the others.

p:first-child {
    indent: 0.5em;
}
p:nth-child(1) {
    indent: 1em;
}

Trick question, what size of indent will be applied?

<h1></h1>
<div>
  <h2></h2>
  <p></p>
  <p></p>
  <div>
    <h3></h3>
    <p></p>
    <p></p>
    <div>
      <h4></h4>
      <p></p>
      <p></p>
    </div>
  </div>
</div>

p:nth-child(2)

will target the first paragraph in all three levels (second child that's a P).

:first-child {

}

This selector rule could be used to target only the headlines. Their type is of no importance, just their placement in the tree.

If we wish to target only the div at the fourth level, then a child selector won't work. They are the second child at all levels. In this case, we would use a descendant selector:

div div div

If the parent had more than one div in it, then a child selector could be used to target only the first one (second child)

div div div:nth-child(2)

or

div div div:nth-of-type(1) /* first of type DIV */

#3

Thanks for the thorough response! I think I have a better appreciation for the :nth-child selector now. Also, you now have me curious about :nth-of-type(), which I'll look more into.

Now for your trick question:

Wouldn't the 1em indent be applied since it occurs later in the DOM?


#4

... later in the Cascade. The DOM is the document object model, which consists primarily of the node tree. CSS selector rules are applied at each node they target. You are right though. Since the two rules target the same nodes, the later rule applies.


#5

for this worked for me perfectly after several trials
/*Add your CSS below!*/
p:first-child {
font-family: Cursive;
}
body:nth-child(2) {
font-family: Tahoma;
}
body :nth-child(3) {
color: #CC0000;
}
body:nth-child(4) {
background-color:#00FF00;
}
body:nth-child(5) {
font-size:22px;
}


#6

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.