Question

I’m using pseudo classes to decorate my xxx. My question is, how to force one of them to be active in the very beginning.

I have two < div >…< /div > as followings:

<div id="A"></div>
<div id="B"></div>

And I’ve style them by following css code:

#A {
    background: url('/xxx/xxx.png') 0 0 no-repeat;
}
#A:hover {
    background: url('/xxx/xxx_hover.png') 0 0 no-repeat;
}
#A:active {
    background: url('/xxx/xxx_active.png') 0 0 no-repeat;
}

#B {
    background: url('/xxx/xxx.png') 0 0 no-repeat;
}
#B:hover {
    background: url('/xxx/xxx_hover.png') 0 0 no-repeat;
}
#B:active {
    background: url('/xxx/xxx_active.png') 0 0 no-repeat;
}

I want to active B once the page is loaded, how can I do that? Thanks.

Answer 1

Not sure if there’s another (“more proper”) way already. But this is how I generally do this:

#A.active,
#A:active {
    background: url('/xxx/xxx_active.png') 0 0 no-repeat;
}

<div id="A" class="active"></div>

This assumes you’d use scripting to remove the class, if necessary. Or, when another page is requested, the class is set on another element, in the back-end.