Forums

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

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #33126
    Jeager
    Member

    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.

    #72928
    noahgelman
    Participant

    Try using :first isntead of :nth-child

    #72921
    Jeager
    Member

    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?

    #72922
    Jeager
    Member

    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.

    #72917
    noahgelman
    Participant

    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;
    }
    #72876
    Chris Coyier
    Keymaster

    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).

    #72810
    Jeager
    Member

    Solved, thanks Chris.

Viewing 7 posts - 1 through 7 (of 7 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.