Override the value of a CSS property

Navigation
2

I am editing a CSS file, I want to cancel the value of that property, but I do not want to set a new value.

I have the file A, that I can not edit . 

.menu a {
  padding: 20x;
}

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

.menu a {
  padding: 0;
}

It does not look like I want. One option is to place another value, such as padding: 5px; , but I'm looking for an alternative. When I uncheck that property in the Safari inspector, things stay as I hope.

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 padding property from 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.

    
asked by toledano 12.03.2017 в 19:17
source

5 answers

1

As you have planned, you can not reset it since it was previously assigned padding: 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% co_of% Style Sheets works in Cascade .

    
answered by 12.03.2017 / 20:25
source
3

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

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>
    
answered by 12.03.2017 в 20:10
2

If you unmark it as you wish, you are surely inheriting the property the way you want it from an ancestor. If you use padding: inherit you will surely get the desired style.

    
answered by 12.03.2017 в 19:24
1

If you use important your style problem will be fixed 

.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>
    
answered by 12.03.2017 в 19:56
1

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

In the html you assign a property id to 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 id will have priority on the name of the class, as you can see in the example (I added a blue background color to appreciate that it works).

If you put the previous code at the beginning of the CSS it will work too, I've tried 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>
    
answered by 12.03.2017 в 22:03
How to add columns of an HTML Table? Why does not the length of a chain show a different amount than the elements possessed?