cade galt cade galt - 6 months ago 9
CSS Question

Why are these CSS rules repeated so often?

I was looking at a single span element(for the top menu) [here][1] in the web inspector.

element.style {
}
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
Inherited from
a {
color: #b00909;
text-decoration: none;
}
html, body, p, a, h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
user agent stylesheeta:-webkit-any-link {
color: -webkit-link;
text-decoration: underline;
cursor: auto;
}
Inherited from
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
Inherited from
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
Inherited from
html, body {
height: 100%;
font-size: 13px;
font-family: 'Montserrat',sans-serif;
}
html, body, p, a, h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
Inherited from
html, body {
height: 100%;
font-size: 13px;
font-family: 'Montserrat',sans-serif;
}
html, body, p, a, h1, h2, h3, h4, h5, h6 {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
html, body, br, hr, div, span, a, object, iframe, ul, ol, dl, li, dt, dd, h1, h2, h3, h4, h5, h6, p, blockquote, q, address, small, big, cite, dfn, ins, del, i, em, b, strong, sup, sub, strike, pre, code, samp, kbd, var, tt, form, fieldset, legend, label, input, textarea, option, .nobox {
background: transparent;
border: 0;
font-size: 100%;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}


I'm trying to understand why the same rules are repeated over and over again. It almost makes understanding just a single element difficult.

Answer

Take a very close look at the html, body, br.... rules in the inspector. You'll see that all the selectors are in grey except for one - the one whose highlighted (not dimmed out rule) matches/cascades to the element you're inspecting.

I selected div.container on this stackoverflow page and got this:

I selected div.container on this stackoverflow page

Also, if you want to see only the rules that are being applied to a specific element (and not where they come from), just select the Computed tab in the inspector:

webkit style inspector