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.
Use the initial keyword to set a property to its initial value. Use the inherit keyword to make an element's property the same as its parent. Use the revert keyword to reset a property to the value established by the user-agent stylesheet (or by user styles, if any exist).
The Universal Reset, which selects all HTML elements using the * selector, and only has two style rules, is probably the simplest of all the CSS resets. By resetting the margin and the padding of every HTML element to 0px, the Universal Reset helps to normalize the format of a page without being too heavy.
CSS resets can save you a lot of time matching a duplicate experience for each web browser. Just keep in mind these resets may not be necessary for every website and you should begin to understand the purpose of individual CSS libraries over repeated use.
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
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.
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