Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Dillon Carter
Dillon Carter
6,364 Points

Create a new rule that targets the first 4 list items only. Set the font weight to bold.

No clue what I am doing wrong here:

li:nth-child(even) { color: white; background: black; }

li:nth-child(3) { background: #FF6347; }

li:nth-child(4) { font-weight: bold; }

Joshua Bivens
Joshua Bivens
8,586 Points

This works also:

li:nth-child(-n+4) { font-weight: bold; }

6 Answers

Kevin Korte
Kevin Korte
28,149 Points

Hard to say what you have going on, so I'm going to give you some resources.

First, read this: http://css-tricks.com/how-nth-child-works/

Than, play with this: http://css-tricks.com/examples/nth-child-tester/

Than, look at this cheatsheet http://css-tricks.com/useful-nth-child-recipies/

And finally, here is how to select the first four list items only http://codepen.io/kevink/pen/ayrtu

James Barnett
James Barnett
39,199 Points

Speaking of nth-child resources

Kevin Korte
Kevin Korte
28,149 Points

Always good to have these resources handy!

James Barnett
James Barnett
39,199 Points

I also made http://codepen.io/jamesbarnett/full/Fanbj it started out as an nth-child playground to help me work out one and it morphed into this.

branco design
branco design
5,120 Points
branco design
branco design
5,120 Points 
/* Write your CSS below */
li:nth-child(even) {
    color: white;
    background-color: black;
}

li:nth-child(3) {
    background-color: #FF6347;
}

li:nth-child(4n+1) 
{ font-weight: bold; }
}
Kevin Korte
Kevin Korte
28,149 Points
Kevin Korte
Kevin Korte
28,149 Points

(-n+4) should select the first four. See the codepen

Dillon Carter
Dillon Carter
6,364 Points

Thanks!

Dillon Carter
Dillon Carter
6,364 Points
Dillon Carter
Dillon Carter
6,364 Points

I was able to fix it. I needed (1n+4) I believe for the last selection.

James Barnett
James Barnett
39,199 Points

It should be noted that n+4 is the same as 1n+4

James Barnett
James Barnett
39,199 Points

That sounds like it is doing the opposite of what you want. That's selecting every element after the fourth list item.

Dillon Carter
Dillon Carter
6,364 Points
Dillon Carter
Dillon Carter
6,364 Points

I always get that confused lol! Thank you for your response :)

Mustafa Kasim
Mustafa Kasim
1,938 Points
Mustafa Kasim
Mustafa Kasim
1,938 Points

If (-1n+4) is the same as (-n+4) then why is the latter not working? In fact the code changes into a strange green colour.