need help with specificity ... again

[rstevenson]

Hi folk,

I'm trying to brighten up my 'action' buttons - like Add to Cart, Continue and Submit. But I can't figure out how to specifically target them in the CSS. (I'm using the CSS Buttons contrib.)

Here, for example, is a bit of code wrapped around a Continue button. How do I reference just that button without affecting other buttons on the page?

<div class="buttonRow forward">
<input class="cssButton button_continue_checkout" type="submit" style="width: 80px;" value="Continue" onmouseout="this.className='cssButton button_continue_checkout'" onmouseover="this.className='cssButtonHover button_continue_checkout button_continue_checkoutHover'"/>
</div>

I've tried...
.button_continue_checkout
.cssbutton button_continue_checkout
input.cssbutton button_continue_checkout
input.button_continue_checkout
... all to no avail. My Continue button continues to look just the same.

Any suggestions gratefully received,

Rob

[gjh42]

.cssbutton button_continue_checkout
input.cssbutton button_continue_checkout
- These say button_continue_checkout is inside/below .cssbutton, which is not true - they are at the same level. You would indicate this by .cssbutton.button_continue_checkout
They also say that button_continue_checkout is an HTML element like input - it needs the dot in front of it.

input.button_continue_checkout
- This is correct, but perhaps not strong enough. Try something like
.buttonRow .button_continue_checkout {}

It may help to search the stylesheet and see what parent selectors have been styled, and in what combinations. Then you can style the relevant combination with .button_continue_checkout added, which should override the parent style in that specific case.

I know this is a quagmire - I've gotten lost in it many times myself, and still not good enough to always get it right the first time (or even the second : ).

[rstevenson]

Thanks Glenn,

I'll try wading a little deeper into the swamp. If (when?) I succeed, I'll post the result here.

Rob

[rstevenson]

Got it!

This works...

/* these should apply a brighter style to "action" buttons, like Add to Cart, Continue, Submit */
.cssButton.button_in_cart, .cssButton.button_submit, .cssButton.button_checkout, .cssButton.button_continue_checkout, .cssButton.button_confirm_order
{
	border: 2px #FFCC66 outset;
	color: #663300;
	background-color: #FFCC66 !important;
}

Thanks for the nudge into the quagmire Glenn.

Rob