Home / Questions / 54825
Accepted
toledano
Asked: 2020-03-13 10:17:54 +0800 CST 2020-03-13 10:17:54 +0800 CST

Override the value of a CSS property

  • 772

I'm editing a CSS file, I want to override the value of that property, but I don't want to set a new value.

I have file A, which I can't edit .

.menu a {
  padding: 20x;
}

So now I create another style sheet, but if I put

.menu a {
  padding: 0;
}

It doesn't look the way I want. One option is to put another value, like padding: 5px;, but I'm looking for an alternative. When I uncheck that property in Safari's inspector, things look like I expect.

Example:

.caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}


/* solo cambiar las líneas de abajo */
/* no vale padding: 40px; */
.caja {

}
<div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

How can I disable the property paddingfrom another style sheet?

In this example the effect is achieved using different classes and elements, using unset. It may not be possible with the conditions I intend.

css3

5 Answers

  1. If when unchecking it you see it as you want, you are probably inheriting the property the way you want it from an ancestor. If you use padding: inherityou will surely get the desired style.

    • 3

  2. If what you want is to override a style, that is, to retrieve the default value of that specific style, in this case the padding, which has been previously modified (the same as unchecking the style from the Google Chrome inspector) you should use the value initial.

    Your modified example:

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

.caja {
  padding: initial;
}
    <div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

    • 3

  3. If you use importantit, your styles problem would be solved

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}


/* solo cambiar las líneas de abajo */
/* no vale padding: 40px; */
.caja {
      padding: 40px !important;
}
    <div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

    • 1
  4. Best Answer

    As you have it raised you cannot reset it since it was previously assignedpadding: 20px;

    The only way is to put padding: 40px;again:

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

.caja {
  padding: 40px; // Nuevo valor asignado
}

    This is how CSSCascading Style Sheets works .

    • 1

  5. There is another way to do it, provided you have access to the HTML.

    In the html you assign a property idto the element, here I have called it nueva-caja:

    <div class="caja" id="nueva-caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene <code>class="caja" id="nueva-caja"</code>
</div>

    Then in the CSS:

    #nueva-caja {
  background-color: blue;
  padding: 40px;
}

    In CSS the idwill take precedence over the class name, as you can see in the example (I've added a blue background color to see that it works).

    If you put the above code at the beginning of the CSS it will also work, I've tested it :)

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

#nueva-caja {
  background-color: blue;
  padding: 40px;
}
    Con id:
<div class="caja" id="nueva-caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene <code>class="caja" id="nueva-caja"</code>
</div>

<hr />
Sin id:
<div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene solamente <code>class="caja"</code>
</div>

    • 1