CODEWITHSUNDEEP
javascriptjqueryhtmlcssstylesheet
Ben A. Noone
Ben A. Noone

Reputation: 389

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.

Upvotes: 7

Views: 2683

Answers (2)

sam
sam

Reputation: 40708

You can't nullify (ignore) values that are already in the cascade; you have to either modify the rule that introduced the value or override it with another value.

* {
    margin: initial;
    padding: initial;
}

(Kudos King King) reverts those properties to their initial values, but doesn't reapply the browser's default styles for those elements. (Those styles were overridden earlier and are "lost".) But that's expected. :)

initial is the "first" value for a property, before any rules are applied. Each property has an initial value defined in the CSS specs.

margin  = auto
padding = 0

The browser's "default" styles are very different — they're actual style rules applied before author stylesheets. They're written to imitate how pre-CSS browsers displayed certain elements.

ul { padding-left: 40px; list-style: disc; … }

These are arbitrary — there are no CSS "defaults" for how a list should look. So if you want per-element defaults it's probably best to write your own.

Upvotes: 0

Etheryte
Etheryte

Reputation: 25321

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.

Upvotes: 12

Related Questions