Question

I have a background on an div element with position top. Now this background spans across multiple li floats (progress indicator).

div.myListingProgressWrapper{
    width: 807px;
    height: 39px;
    background: url(background.png) top no-repeat;
}

ul.fiveStepProgress li a{
    float: left;
}

Now I would like to apply an active state to the a class and move the background of the parent container to bottom as the background contains a different colour and a progress arrow.

My question is, can I move the parent container background to bottom by applying the active class on the child a link?

Cheers

Answer 1

You cannot select a parent from within CSS. There have been several suggestions to the W3C on how to do this over the past few years, but the performance concerns have shot everything down. Plenty of reading on this, here’s a link: http://css-tricks.com/7701-parent-selectors-in-css/

You’re best off setting the a class on the parent, which affects the child… since you can’t do it the other way around without javascript anyway.