CODEWITHSUNDEEP
htmlcssflexbox
Jimmy Anderson
Jimmy Anderson

Reputation: 91

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.

Upvotes: 1

Views: 166

Answers (4)

user17221466
user17221466

Reputation:

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 important rule is used on a style declaration, this declaration overrides any other declarations. Although technically !important has 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 !important rule 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

Upvotes: 2

James
James

Reputation: 2787

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

Upvotes: 1

illogicalapple
illogicalapple

Reputation: 773

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]
}

Upvotes: 1

Quentin
Quentin

Reputation: 944439

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.

Upvotes: 1

Related Questions