The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Using 'selected' with 'nth-child'

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #166678

    I’ve got links in an unordered list, which are currently displaying a unique background color on hover. However, I would like that background color on the link to remain displayed, after the user selects it. I’m having difficulty getting that color to display in the ‘selected’ state. Here is a sample of the code that I’m using:

    .samplenav  li:nth-child(1):hover, .samplenav .li:nth-child(1).selected {
        background-color: red;
    .samplenav li:nth-child(2):hover, .samplenav .li:nth-child(2).selected {
        background-color: greenyellow;
    .samplenav li:nth-child(3):hover, .samplenav .li:nth-child(3).selected {
        background-color: #0495D6;

    I’m new to CSS, and I’ve searched on Google for a solution, but have not found one yet.

    Thanks, in advance,


    You cannot mix nth-child and classes on the same element.

    For your list items, you can either select by class, or nth-child, not both. I believe this is the route of your problem.

    In your case, your css selector will ignore the .selected class and just target nth-child elements.


    You cannot mix nth-child and classes on the same element.

    Actually, you can.

    Granted you can’t actually do an nth-of-class (unless the elements all have the same class but then the class in the selector is irrelevant anyway).

    However, in this case, I suspect that the issue (or at least part of it) is related to the extra . in front of the li for the .selected class.

    .samplenav .li:nth-child(1).selected

    As for the ‘staying’ selected, that’s a Jquery solve. :

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