'Turn off CSS property

Lets say I have a plugin's CSS which loads later as my style.css

/*style.css*/
.something {
position:absolute;
left: 0px !important;                       
}

/*plugin's CSS*/
.something {
position:absolute;
left: -50px;                       
}

/now it has 0px but i want no left value at all/

i know i can set !important so that property wont be overriden, but is there any solution to turn "left" off as Chrome DevTools uncheck a property?

cssoverriding


Solution 1:[1]

You should use the "auto" value for left:

.something
{
    position:absolute;
    left:auto !important;
}

"auto" will reset to the default (that is set by browsers for that style)

more info here: http://www.w3schools.com/cssref/pr_pos_left.asp

Solution 2:[2]

Specificity is the key to selecting the CSS attribute that you really want. Leverage the specific structure of the HTML in the plugin vs. non-plugin case so that specificity rules select the CSS you desire when plugin rules should apply.

There's a great overview of specificity here:

enter image description here

Source: http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

One thought that comes to mind is to use an additional class, plugin, along with an appropriate selector.

Solution 3:[3]

If you are trying to override it then you can play with CSS Specificity Rules

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Software Guy
Solution 2 Eric J.
Solution 3 Hazem Salama

Related Questions