Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,109 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

Kevin Korte
Kevin Korte
28,109 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
/* 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,109 Points

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

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

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

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.