- This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
Viewing 7 posts - 1 through 7 (of 7 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › using nth-child(1) on a anchor
So im doing a nav bar and writing up code so that when you are on the home page (body given ID of home) it will use this:
#home nav ul li a:nth-child(1) {
background-position:bottom;
}
Saying that when the #home is available, go to the nav ul li a, and use the first child to switch the background position. However its selecting all the tags in the nav, and when I use a different number it selects none of them.
Try using :first isntead of :nth-child
Doesn’t work. Also I would need nth-child to specify each page link to change bg position, so 1-6 in the nav bar. Also tried using:
#home li#home_menu a {
background-position:bottom;
}
Which should work, but is not either. Double checked, body tag has proper id of home, and so does my li… Not sure whats wrong?
I lied, thats working now, but I would still much rather use nth-child, as it would be a lot nicer to have less markup and ID’s.
Maybe it didnt work since you didn’t put an n value in? Try:
#home nav ul li a:nth-child(1n) {
background-position:bottom;
}
I’ll bet you a nickel:
#home nav ul li:nth-child(1) a {
background-position:bottom;
}
The CSS infers a list. It’s the list items which have multiple siblings within the list. The anchors are within the list items, so :nth-child see’s all of them as the first child of list items (the “counters” reset when you move down a DOM level).
Solved, thanks Chris.