How to delete padding property?
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.
Solution 1:
Reseting
[class*=col-] {
padding: initial;
}
make sure that the styling file is linked after the third party file, like:
<head>
<link rel="stylesheet" href="third party">
<link rel="stylesheet" href="style that have padding initial">
<!--OR-->
<style>
[class*=col-] {
padding: initial;
}
</style>
</head>
When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. --- Specificity - Mozilla
Note
if this didn't work, write !important after the styling like this
[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.
But,
When an
importantrule is used on a style declaration, this declaration overrides any other declarations. Although technically!importanthas nothing to do with specificity, it interacts directly with it. Using!important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets. When two conflicting declarations with the!importantrule are applied to the same element, the declaration with a greater specificity will be applied.
so don't use it only when you're editing external plugins/libraries like your case:
Only use !important on page-specific CSS that overrides foreign CSS (from external libraries, like Bootstrap or normalize.css).
Resources
Specificity - Mozilla
Solution 2:
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.
Solution 3:
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]
}
Solution 4:
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