This forum is now read-only. Please use our new forums at discuss.codecademy.com.

CSS Selectors Forum

View Course

475 points
53af922a282ae395a000136a_43798073
Submitted by
Chloe
almost 4 years ago

nth-child?

If I had this in the body

<a href="http://www.youtube.com">Youtube</a>
<p>hello</p>
<a href="http://en.wikipedia.org/">Wikipedia</a>
<p>hi</p>
<a href="http://www.facebook.com/">Facebook</a>

and in css I write

  a:nth-child(3) {
        color:#FFC125;
  }

Why does the second link change color and not the third?


22 votes

permalink

To select the 3rd link, we would either point at the 5th child, or the third child of type:

a:nth-of-type(3)

8296 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
almost 4 years ago

6 Comments

53af922a282ae395a000136a_43798073 Chloe almost 4 years ago

Thank you for your answer!

5544fd9c51b8871e720004a8_989380055 Mikeladheri almost 4 years ago

because your "3" refer the third child of the Body, and yours third child is wikipedia

D7231e0a925ca058b1400c24dc1db183?s=140&d=retro Minerva_ about 3 years ago

I don't get it, could you please elaborate? I only have three links in the whole document, so how can it be that the third link is the 5th child of the body?

5958b8ebe12813a2a3000034_980106998 Roy about 3 years ago

first-child, nth-child() and last-child are independent of type. There are five elements in the OP, and the 5th child happens to be a link. The third link, in this case, so it matches, a;nth-child(5).

502d0905afd60d000202ee28_695544892 Paul over 2 years ago

So the five elements are Head, Body, then the three links?

5958b8ebe12813a2a3000034_980106998 Roy over 2 years ago

The five elements showing in the opening post are A P A P A. The body element is implicit, and the head element is never styled (or selected) by the CSS since it doesn't render to the display the way the body elements do.


4 votes

permalink

It doesn't make sense? I understand if you just count 1,2,3,4,5 of any line but he specifies that its "":nth-child(3) ....not just any nth-child(3) ....shouldn't it just be looking for the "a" childs and not for ALL childs? why would I otherwise be even be any selector at all ?

My original question (why I came here) was actually this one:
Just for funs sake I wanted the link color to change when you hover above it but only the link that didn't have a nth-child pseudo-selector, actually did change color when you hovered above it. Why? and how would I solve that part?
a:hover {
text-decoration:none;
color:red;
}

a:first-child {
color:#CDBE70;
}

a:nth-child(3) {
color:#FFC125;
}

268 points
7c98ee101cfedbf4cde815c8cf7acbe5?s=140&d=retro
Submitted by
stoffe03
over 2 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy over 2 years ago

a:nth-child(3) looks not for the third link, but a link that is the third child of its parent element. a:nth-of-type(3) matches to the third link, also a child of its parent element.


2 votes

permalink

Because the second link is, an 'a' that is the third child of its parent element.

8296 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
almost 4 years ago

1 Comment

4c5e1da55287aa7c58c48adaf882a448?s=140&d=retro Sushmitha about 2 years ago

Good explanation! Good highlighting


1 vote

permalink

This n-th child stuff is the hardest thing so far. It would be useful to have some explanation on why you would want to do this, other than it is possible.

I have difficulty counting here, in terms of where to start. In our simple example, the three links are childs of the body tag, so that would make the 3 links 1/2/3 child, right? I have tried repeatedly to get the nth-child to change color of the link but no success. I have even tried to change the number inside the ( ) to 3/4/5/6/7/8/9 etc, but nothing seems to change it.

Whoops: I actually just figured out my mistake and even though it makes me look like an idiot, I'll share it anyway. I had added a P tag after every link (no great reason), so this must have killed all the childs.

I still would like to know some situations or reasons that you might deploy these child tricks.

170 points
550f624251b887deef004407_799035398
Submitted by
Jim McCall
over 2 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy over 2 years ago

If they were 'tricks' as you say then we could assume that CSS selectors are all smoke and mirrors. But they are not, and this is not a trick. It's call document tree (or DOM tree) traversal and it is a very powerful tool since it helps to keep class and id attributes to a minimum. Using pseudo-classes lets us zero in on any one or more branches of the tree sharing this common trait (position in the tree).


0 votes

permalink

Let's see if I understand this. If your selector is p:nth-child(3), you first find the set of paragraphs you are (or hope you are 8-) styling. Then you look for the immediately enclosing element, which could be , or , or , or whatever. FROM THAT PARENT, you find the third element within it. That element may be a , or it may not.

The p: in the selector is used to find the parent, and the 3 is used to select the child (regardless of type).

Corrections welcome.

I hadn't yet heard of nth-of-type - thanks for that 8-)

Don in Denver

902 points
E6da7fe131b0479a85206f70dca45015?s=140&d=retro
Submitted by
Donald
over 3 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy over 3 years ago

:nth-child(N) will match any Nth child of its parent (can be multiple matches in the document). p:nth-child(N) matches only P that is a third child of its parent. Again, there can be multiple matches in the document.


0 votes

permalink

Can i have the answerd, for then i understand me error please?

162 points
34324a4c11496fb115e8e46a70ec3f74?s=140&d=retro
Submitted by
diro10
over 2 years ago

1 Comment

5958b8ebe12813a2a3000034_980106998 Roy over 2 years ago

Please post your code in a new question thread. This thread is a year old and quite resolved. As a new question everyone will see it and can help.