I've been comisioned to write landing pages for a website.
Here's the problem: the original developer(s) added a "Universal Selector * Reset" in the main css file:
* { //Universal Selector '*' Reset
margin: 0;
padding: 0;
}
and then built the site styles around it.
Unfortunately, this is requiring alot of code to work around on Tables, Lists, Headings, Etc..
The Question is: Is there any way to bypass the selector for an individual object(table, list, etc) or even for the page in general(aside from not including the css file)?
Edit: Some people were confused by my question. By bypass I mean to ignore the asterisk selector rather than override it... Also note that I am trying to minimize on extra code.
Edit 2: here is a jsFiddle that illustrates my problem.
Note: "padding: initial;" dosen't seem to be working.
Any other selector is more specific than the *
selector and will thus override it's effects.
See the following sample Jsfiddle.
So therefore if you, for example, want to restore the paddings on a <table> you can simply do
table {
padding: initial;
}
If this doesn't quite tickle your fancy you can instead fine-tune your asterisk selector to ignore elements of your choosing:
*:not(table) {
[...]
}
Appendix:
As may come unexpected for many, setting a property and then using initial
on it with a more specific selector doesn't necessarily reverse the setting.
Compare a reset to initial value (second image below) to an unstyled example (first image below) (depending on your browser the result may differ):
Unstyled:
Reset:
This is because the initial value (defined in the CSS spec) of the property may differ from your browser's default value for the element.