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
Frank Wright
79 Pointsnth-child not working
My nth-child isn't working once I put < a > in. Does anyone know how to solve this problem?
CSS: http://pastie.org/private/vprebtlqewrumuhxb2wbhq
HTML: http://pastie.org/private/trb65e9xwahdygpbmqh6ka
Thanks!
4 Answers
Jason Anello
Courses Plus Student 94,610 PointsThe reason :nth-child isn't working is because the li's all need to be direct children of the same parent. By putting links around them they are now only-child's of their parents.
As others have pointed out, you have invalid html here. This will not pass the validator at w3c. The only direct children of a <ul> that you are allowed to have are <li>'s and script supporting elements. There can be no other elements as direct children of a <ul> You're relying on the browsers to interpret your invalid markup correctly.
Hayden Taylor has showed you the correct valid markup to use and Justin Horner has given you a demo which shows you how to do the links so the entire area is clickable, not just the text.
You have everything you need here to come up with a correct and standards compliant solution.
Instead, you have written extra php logic to insert classes in order to overcome :nth-child not working on your invalid html, I recommend that you rethink this course of action.
Hayden Taylor
5,076 PointsTypically you want to order your navigation like so
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
Try that.
Frank Wright
79 PointsThe problem with that is that is that you must click the words, you can't click the LI.
Hayden Taylor
5,076 PointsYea I know what you are trying to do but... the structure of a list must contain the li first or its going to create some problems for you.
Now your concern is only clicking the words and not the list item (li) ?
In the css target the a elements and increase their padding so:
a {
padding:0.5em;
}
Frank Wright
79 Points.> I'm dumb. Thanks for trying to help though :)
I ended up just doing this:
Frank Wright
79 Points.> I'm dumb. Thanks for trying to help though :)
I ended up just doing this:
Hayden Taylor
5,076 PointsI still highly recommend you move the a tags inside the li. But I am glad you figured it out.
Justin Horner
Treehouse Guest TeacherHello Frank,
I must back Hayden Taylor here. You're anchor tags should be placed within your list items. Although you may be able to make it work otherwise, it's not conventional to do this.
I've created a Code Pin here that hopefully demonstrates what you need to do to have padded list items to provide a clickable area for your anchors.
The Code Pin includes a limited version of a header built from "Display Modes", a section of the CSS Layout Techniques Deep Dive here on Treehouse.
I hope this helps.
Hayden Taylor
5,076 Points.
Hayden Taylor
5,076 PointsHayden Taylor
5,076 Pointsstrongly agree
Frank Wright
79 PointsFrank Wright
79 PointsOK, I will change it to the way you guys have pointed out :)