Multiple nested css link attributes

  • KibsLovesYou

    (@kibslovesyou)


    14 years, 5 months ago

    I don’t particularly ACTUALLY have an example that’s public, but I’ll try my best to be descriptive.

    I have two menus, a top menu, and a bottom menu. When you hover over it, it goes from black to an orange color, and it remains orange when it’s the current_page_item. The bottom menu’s first item has a custom css atribute of “first_page_item” so I can give the top left end of it a rounded corner.

    This is working with everything but when it is the current_page_item, when so, it is not rounded.

    So I’m trying to find a way to get the css to understand that when it is both current_page_item and first_page_item it should be rounded, but only then (hover and active are doing just fine).

    What I’m trying to do to fix this is nest it like so:
    `.menu2 li .first_page_item .current_page_item { example css etc }’

    But to no avail. Any thoughts?

Viewing 2 replies - 1 through 2 (of 2 total)
  • curtismchale

    (@curtismchale)

    14 years, 5 months ago

    Putting two classes next to each other with no spaces means the element needs both classes.

    .current_page_item.first_page_item{CSS}

    That should target only items with both of the classes on the same element.

    Thread Starter KibsLovesYou

    (@kibslovesyou)

    14 years, 5 months ago

    Thanks, though it seems to also be inheriting the standard page_item ‘s “current_page_item”, I’ve done some googling, but I can’t seem to find a solution for something like “.current_page_item!.first_page_item” so that the first one ignores the new one.

    Or I suppose I could just add another class to the REST of the page items and require that for the other “current_page_item”

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Multiple nested css link attributes’ is closed to new replies.

Tags