Search code examples
javascriptjqueryhtmlcssstylesheet

Bypass CSS "Universal Selector * Reset"


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.


Solution

  • 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:
    Unstyled sample

    Reset:
    Reset sample

    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.