CODEWITHSUNDEEP
css
DeLe
DeLe

Reputation: 2480

How to Disable selector in file

I have a style.css file. that has

.example {
  float: none;
  left: 4px;
  position: absolute;
  top: 3px;
}

now, I try to disable some attribute in .example class to

.example {
  bottom: 20px;
}

I try like below but that's not working

<style type="text/css">
          .example {
                bottom: 20px !important;
                top: none !important;
                left: none !important;
                position: none !important;
            }
 </style>

Is that posible? I don't want to change direct in file?

Upvotes: 1

Views: 97

Answers (4)

Ishan Jain
Ishan Jain

Reputation: 8171

top: none; , left: none;, position: none; these are not a valid CSS properties.

You can try with this:

.example {
    bottom:20px;
    top:0px;
    left:0px;
    position:static; /*static*/  /*absolute*/ /*relative*/  /*fixed*/;
}

Upvotes: 0

davidpauljunior
davidpauljunior

Reputation: 8338

Try .example { position: static; }.

'None' is not a valid value for these CSS rules. Once you set the position to static, top, bottom, left, right won't matter any more. 'Static' is the default value for the 'position' rule.

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241038

The properties you are trying to overwrite it with are not valid.

enter image description here

There is no such thing as position:none, top:none, and left:none..

Instead, use something like:

.example {
    bottom:20px;
    top:auto;
    left:auto;
    position:static;
}

Doing this will successfully overwrite each property and set it back to its defaults.

jsFiddle here

Using auto will essentially reset the properties to their initial value, no need for !important.

Aside from merely overwriting properties, you could always just remove them to begin with too - most of the time...

Upvotes: 1

ryanlutgen
ryanlutgen

Reputation: 3051

So long as you declare that style in the HTML in your AFTER you import style.css, it should take precedence.

See this here: JSFiddle

<p>Some Text</p>  <!-- takes most recent styling of <p> -->

I am importing a stylesheet with a paragraph background of blue, but I re-declare it in my CSS to be red. The redeclared one takes precedence, as it is declared later.

Note too your CSS is not valid. Should be something like:

.example {
    bottom: 20px !important;
    top: auto !important;
    left: auto !important;
    position: static !important;
}

See this: http://www.w3schools.com/cssref/pr_pos_top.asp and http://www.w3schools.com/cssref/pr_class_position.asp

Upvotes: 0

Related Questions