Why cant I remove this border with CSS?

Question

I have two questions I seek your help with:

I am trying to remove the grey border using CSS but can't seem to remove it.

My code is:

<p class="product woocommerce add_to_cart_inline " style="border:4px solid #ccc; padding: 12px;">
  <span class="woocommerce-Price-amount amount">
    <span class="woocommerce-Price-currencySymbol">$</span>
    29.00
  </span>
  <a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart"
    data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">
    Add to cart
  </a>
</p>

My CSS is:

p.product.woocommerce.add_to_cart_inline {
  border:0px;
}

span.woocommerce-Price-amount.amount {
  display:none
}

Here is my JSFiddle.
Can someone please let me know why my CSS code does not work?

In Chrome developer tools, is there a way to easily copy the CSS selector?

For example, after pointing out that this is the selector.
Is there a way to easily copy the "p.product.woocommerce.add_to_cart_inline"?

Right now I type it out manually myself. I am pretty sure that there should be a way to copy it and paste it directly?

To copy the CSS in the developer tools, select the element you want to copy the CSS for and then highlight what you want in the styles tab. [Screenshot](https://i.stack.imgur.com/KvbVv.png) — misterManSam, Oct 24 '19 at 07:20
@misterManSam Thanks. But then when I do your method, it will not have the stuff at the front such as p. a. span. etc — umek, Oct 24 '19 at 07:32
Adding the element before a class or id is usually not necessary, unless you need it for CSS specificity reasons or want to distinguish between different elements that have the same class. [Here is a CSS Specificity calculator](https://specificity.keegan.st/). — misterManSam, Oct 24 '19 at 07:37

score 1 · Accepted Answer · edited Oct 24 '19 at 07:18

change your HTML code you have inline css for border in html p tag

<p class="product woocommerce add_to_cart_inline " padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>

or you can add important to css like this:

p.product.woocommerce.add_to_cart_inline {border:none!important;}

Nadir Laskar · Answer 2 · 2019-10-24T07:21:05.610

It's not working because of css specificity rules

You are adding border style inline in p tag which has more specificity than css selector.

To fix this, remove the border style from the inline and apply it using another css selector.

Here is updated fiddle

p.product.woocommerce {
  border: 4px solid #ccc;
  padding: 12px;
}

p.product.woocommerce.add_to_cart_inline {
  border: 0px;
}

span.woocommerce-Price-amount.amount {
  display: none
}

<p class="product woocommerce add_to_cart_inline"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511"
    data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>

score 0 · Answer 3 · answered Oct 24 '19 at 07:15

Remove border css style from style attribute

<p class="product woocommerce add_to_cart_inline " style="padding: 12px;"><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>29.00</span><a href="?add-to-cart=511" data-quantity="1" class="button product_type_simple add_to_cart_button ajax_add_to_cart" data-product_id="511" data-product_sku="plan1" aria-label="Add “Plan 1” to your cart" rel="nofollow">Add to cart</a></p>

score 0 · Answer 4 · answered Oct 24 '19 at 07:17

0

add !important

p.product.woocommerce.add_to_cart_inline {border:none!important;}

answered Oct 24 '19 at 07:17

Marzouki nizar

41
8

Why cant I remove this border with CSS?

4 Answers4