We are using a 3rd party payment gateway and its CSS is messing with our code. It has added the following attr to set all cols to padding 0.

[class*=col-] {
   padding: 0;
}

How should I remove this padding property? I don't want this padding property.

CodePudding user response：

Reseting

[class*=col-] {
   padding: initial !important;
}

Removing

you can use JS to remove the property: removeProperty(),

Re-Setting

or just set the padding everywhere you want and add !important in the end

CodePudding user response：

You can't really remove a property. You can only write a selector to give it a different value.

Setting it to initial should give the element back its default value.

It won't cause it to revert to an early style you've applied through. If you want that then you should make the original assignment override through the specificty of the selector where you added it.

CodePudding user response：

variables

You could do:

.my-class[class] /* for specificity */ {
  padding: var(--padding);
}

and then for every tag with the .my-class class make a --padding of your choice

or the obvious

.my-element[class] {
  padding: [padding]
}

CodePudding user response：

Maybe you are looking for the CSS removeProperty()?

The CSSStyleDeclaration.removeProperty() method interface removes a property from a CSS style declaration object.

Check more here