CSS to style a non-unique button class-CodePudding

I'm trying to style this button with CSS. It's used on a Cart Page and other areas throughout the site. On the cart page its "name" element is unique name="calc_shipping". However, because the class is not unique if I try to style it using the current class it naturally changes the style of all similar buttons.

Question: Is it possible to somehow use the name="calc_shipping" element in my CSS modification to style this button specifically?

<button type="submit" name="calc_shipping" value="1" >Update totals</button>

Thanks for any suggestions! I've been racking my head on this for hours.

CodePudding user response：

You can simply add an ID to this specific button. I'll for example use ID "calc_shipping_btn"

<button type="submit" name="calc_shipping" value="1" id="calc_shipping_btn" >Update totals</button>

The CSS for this would be:

#calc_shipping_btn {
background-color: #00FF00;
color: #FFF;
}

If you don't want to add an ID you can target this specific button with this CSS:

button[name="calc_shipping"] {
background-color: #00FF00;
color: #FFF;
}

Add !important after every rule if they refuse to style the element. This helps override the class' css.

CodePudding user response：

if your button has unique parent section as div or span for example parent-section class you can add style to button this example

.parent-section button{
 ...
}