Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Reset vs * wild card

Tags:

html

css

Why cant I just do a simple reset of:

* { margin: 0; padding: 0; font-size: 100% }

instead of:

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
like image 345
Robert Rocha Avatar asked Aug 11 '15 17:08

Robert Rocha


People also ask

What does a CSS Reset do?

A CSS Reset style sheet is a list of rules that 'reset' all of the default browser styles. We reset the browser styles for two primary reasons: Not all browsers apply the same default rules. They may be similar, but not exact.

Can you use wildcard in CSS selector?

Wildcard Selectors (*, ^ and $) in CSS for classesWildcard selector is used to select multiple elements simultaneously. It selects similar type of class name or attribute and use CSS property. * wildcard also known as containing wildcard.

What is global reset CSS?

Resetting your styles, commonly referred to as CSS Reset or Reset CSS is the process of resetting (or more accurately – setting) the styles of all elements to a baseline value so that you avoid cross-browser differences due to their built-in default style settings.

What is a style reset?

A reset stylesheet (or CSS reset) is a collection of CSS rules used to clear the browser's default formatting of HTML elements, removing potential inconsistencies between different browsers.


3 Answers

First of all you can.

Answering the question: because you probably don't want to have all elements with specified parameters. For example you do not have inputs, buttons etc. there.

like image 194
smnbbrv Avatar answered Sep 22 '22 00:09

smnbbrv


Maybe because type selectors have more specificity than the universal selector.

Or because this CSS reset doesn't want to match all elements, like inputs.

like image 40
Oriol Avatar answered Sep 18 '22 00:09

Oriol


Applying all those styles to all elements would result in unanticipated styling. Please check out the following textbox, dropdown, and textarea reset with all your reset styles:

<input type="text" value="foo" />
<select>
<option>Foo</option>
<option>Bar</option>
</select>
<textarea rows="10" columns="30">foo</textarea>

http://jsfiddle.net/esm63r30/

Pretty bare!

like image 31
Mister Epic Avatar answered Sep 22 '22 00:09

Mister Epic