Bypass CSS "Universal Selector * Reset"

Question

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.

why wouldnt you just use table,list { margin: 1em; padding 1em;}? — agconti
– agconti, Commented Jun 9, 2014 at 19:40
have you tried overriding it using something like * { margin: initial; padding: initial; }? — King King
– King King, Commented Jun 9, 2014 at 19:40
Wouldn't just supplying a more specific selector do just that? table { margin: 10px; }. The point, surely, is to eliminate differences in default styling between browsers; why you would want to revert to that inconsistent styling I have no idea. — IMSoP
– IMSoP, Commented Jun 9, 2014 at 19:40
Is the issue that you can't override anything, or that you'd like a better way to override EVERYTHING? — SWPhantom
– SWPhantom, Commented Jun 9, 2014 at 19:40
@BenA.Noone I did not mean initial works, in fact I tried it and I know it does not work in any browsers (at least for padding). Here is how you can use script to ignore the * rule demo — King King
– King King, Commented Jun 9, 2014 at 20:17

Etheryte · Accepted Answer · 2014-06-09 20:15:52Z

12

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.

edited Jun 9, 2014 at 20:15

answered Jun 9, 2014 at 19:42

Etheryte

25.4k12 gold badges77 silver badges121 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben A. Noone Over a year ago

I will ask the site maintainer to place some "nots" on the asterisk. Thx

sam · Accepted Answer · 2014-06-11 19:38:16Z

0

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.

edited Jun 11, 2014 at 19:38

answered Jun 9, 2014 at 20:13

sam

40.7k2 gold badges43 silver badges38 bronze badges

2 Comments

Ben A. Noone Over a year ago

Thanks for the thought, but this didn't work(at least in chrome). See Nit's answer for an explaination of why.

sam Over a year ago

Ah, I didn't realize you wanted to "keep" browser defaults. Just remember -- browser default styles are arbitrary and unknown, so you're better off just writing your own element-specific styles at the start.

Collectives™ on Stack Overflow

Bypass CSS "Universal Selector * Reset"

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related