Question 2916 in Wordpress Question posted in
The official Wordpress documentation can be found here.

CSS to style a non-unique button class – WordPress

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" class="fusion-button button-default fusion-button-default-size button">Update totals</button>

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

ch

Tags:

2

Answers


  1. 0

    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" class="fusion-button button-default fusion-button-default-size button">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.

    Login or Signup to reply.
  2. 0

    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{
 ...
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search