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).
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With