Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Overwrite CSS class selectors without !important

I'm just writing a javascript UI dialog for a web app. The problem is that users can create there own themes for the web app, which may include element css selectors (h1 {...}, div {...} etc.) which overwrite my css formatting for the UI dialog. The dialog is a div element which is formatted over a class selector (id dose not work because this dialog may appear multiple times). Is there a way to stop the element selector of the user template style affecting the UI dialog, without having to use a huge css reset style and using !important for every style of the UI dialog? How do UI libraries like jQuery UI style there dialog boxes?

For example the user theme includes:

input {color:nuts; height:bananas; width:crazy; background:morenuts; }

The UI's css:

.ui_modal_wrap input {color:red; border:1px solid black;}

The UI's html:

<div class="ui_modal_wrap>
<input type="text" name="#" />
</div>

Problem is still that I have to use a huge css rest for .ui_modal_wrap because you can't really write css with all attributes a user could apply (in this example the height and width element would still break the styling because the UI's dose not include height and width).

like image 259
wowpatrick Avatar asked Sep 29 '10 16:09

wowpatrick


People also ask

How do you override an element style without important?

The only way to override a CSS rule without using ! important is to use a more specific selector. No selector is more specific than the style attribute. Save this answer.

How do I overwrite a CSS class style?

To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.

Can Important be overridden in CSS?

You can override the ! important rule, naturally by another one. The overriding ! important rule should be declared lower on the CSS flow and it should have the same or higher level of specificity in order to be in effect.


1 Answers

In general you should know that rules are applied (if both are in external stylesheets) with specificity rules.

Generally there is a score you can think about, and the rule applying to the element that has the highest score will be applied.

In a selector chain, each element type is worth one, classes are worth 10, and an id is worth 100 points.

body div.wrapper == 12 points

body div.wrapper div span == 14 points

body #quote == 101 points

So generally just make the page-specific rules (that style the rest of your page) less specific, and let the UI CSS take over. Alternately you could always put the UI markup inside a "super" bit of HTML, like:

<div id="super">
    <div id="super2">
        //your UI stuff
    </div>
</div>

And then "namespace" the CSS for the UI by putting #super #super2 before each rule on that style sheet.

like image 59
Alex Mcp Avatar answered Nov 30 '22 14:11

Alex Mcp