Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 785
Ben A. Noone Avatar asked Jun 09 '14 19:06

Ben A. Noone


People also ask

How do I Reset CSS to default?

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).

What is the universal Reset CSS?

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.

Is CSS Reset still needed?

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.

What is the * selector CSS?

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.


1 Answers

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.

like image 123
Etheryte Avatar answered Oct 02 '22 17:10

Etheryte