3

I have seen from time to time this alphabetized css selector. Why would someone use a selector like that? Where did it come from? Why can't we just use * selector to select all?

------ update ------

After seeing 2 answers now the question becomes what element is left out, i.e. what element does not need to be normalized?

Thanks.

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas,
caption,center, cite,code, dd, del, details, dfn, div, dl, dt, em,embed, fieldset, figcaption, 
figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, 
kbd, label, legend, li, mark, menu, nav, object, ol, output, p,pre, q, ruby, s, samp, 
section,small, span, strike, strong,sub, summary, sup, table, tbody, td, tfoot, th, thead, 
 time, tr, tt, u, ul, var, video {
    margin:0;
    padding:0;
    border:0;
    font: inherit;
    ...
}
2
  • because * selector would select more things than whats listed, it's always good practice to only target the things you intend to change
    – soulshined
    Commented May 22, 2018 at 3:52
  • 1
    Elements not in the given list: metadata elements (title, link, meta ..), their container, head; form control elements (input, select, textarea ...); ruby content elements (rb, rp, rt ...); a selection of obsolete elements (i.e. big, tt, strike ... are there, but blink, marquee, font ... are not); script-supporting elements; foreign elements (svg, math ...); custom elements.
    – Alohci
    Commented May 22, 2018 at 6:06

2 Answers 2

1

This is called normalization,each ٍelement may have properties as defaults in different browsers,normalization makes browsers render all elements more consistently.

h1,h2,.....,a {
  my rules;
}

For Example,h1...h5 elemets have some margin as default. we don't want this margin for it,so change it.see this example:

h1,h2 {
  background-color: orange;
  border: 1px solid;
}

.def {
  margin: 0;
}
Default without change <b>margin</b>.<i>h1</i> and <i>h2</i> have margin as default:
<h1>Default H1</h1>
<h2>Default H2</h2>

Changed:
<h1 class="def">Default H1</h1>
<h2 class="def">Default H2</h2>

* Selector, selects all things, but we must select elements that need change it default properties.

6
  • This doesn't answer the question at all.
    – jhpratt
    Commented May 22, 2018 at 4:23
  • On the contrary, I believe he answered my question. The only question I have now what elements are missed in this selector, i.e. what element doesn't need to be normalized.
    – Qiulang
    Commented May 22, 2018 at 4:41
  • @Qiulang , It depends on your opinion. You select the matches yourself, you can use of CDNs for normalizetion like: cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css
    – Ehsan
    Commented May 22, 2018 at 4:48
  • I know, but I was thinking whether I should accept yours or the others because you guys both let me know it is called normalization. But both of you didn't mention exactly what element does not need to be normalized, so I should not use *
    – Qiulang
    Commented May 22, 2018 at 4:49
  • The other answer also mentioned the link. But anyway I accept your answer. Thanks.
    – Qiulang
    Commented May 22, 2018 at 4:51
1

This CSS code generally corresponds to code inside a CSS framework like Bootstrap to normalize and standardize browser output of HTML elements, as for default, browsers rendering engines have associated properties assigned for certain elements, applying this certain CSS rules allows a page to render a more consistent output on most browsers. Some browsers present some "bugs" or particular behaviours with their rendering engines and this CSS stylesheets aim to fix or "reset" the css rules for HTML tags. A very common "resetting" CSS component that is used is normalize.css, you can learn more about it here.

As for why the * selector its not used, I think it would be because not all this fixes correspond to all HTML tags, and also if new HTML tags are supported or included on the HTML specifications, applying a global style to all elements could make them behave incorrectly. Hopefully someone could expand on my answer to make it more complete.

EDIT

As this question intrigued me, it is interesting to check how the universal * selector is intended to assign properties to CSS namespaces, but a potentially wrong implementation for older/mobile browsers could lead to unknown issues, you could refer to the definition of "universal selector" on this links:

MSDN definition on Universal Selectors

W3C Definition on Universal Selectors and appliance

Browser implementations of Universal Selectors (check known issues tab)

3
  • Hi sorry I accepted the other answer although both of your answered my question.
    – Qiulang
    Commented May 22, 2018 at 4:54
  • @Qiulang you should select the answer that fully answers your question, so don't mind about it, but I must say this question could be expanded in the future. Commented May 22, 2018 at 5:04
  • Sadly someone even voted to close my question. I have no idea why.
    – Qiulang
    Commented May 22, 2018 at 5:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.