View Full Version : '.body-wrapper p' overriding class lower in stylesheet - why?

04-28-2011, 08:50 PM
I'm having trouble understanding why a style I have lower in the stylesheet is being overridden by a style higher up. Can anyone help explain this to me?

Stylesheet (well just the resets in case they're needed, and the 2 classes):

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 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%; font-family: Arial, Helvetica, sans-serif;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
table {border-collapse: collapse; border-spacing: 0;}

input {padding: 0; margin: 0;}

/* - - - - - - - - - - - - universal styles */

html, body {height: 100%;}
body {background: url(../images/bg.jpg) top left;}

a {color: #fff; font-size: inherit; text-decoration: none; outline: 0; outline: none;}
a:visited {color: #fff; text-decoration: none;}
a:hover {color: #fff; text-decoration: none;}
:focus {outline: 0;}

p {color: #ccc;}

.body-wrapper p {color: #ccc; font-size: 0.8em;}

/* ------- farther down... */

.form-sublabel {
color: #666;
font-size: 0.7em;}

the html:

<div class="body-wrapper">

<div class="content-div1">
<h2 class="style1">Heading</h2>

<div class="form-contact-wrapper">

<div class="row-wrapper">
<div class="label-container"><p class="label">Name<span class="req">*</span></p></div>
<div class="field-container"><input type="text" name="Name" class="field" /></div>

<div class="row-wrapper">
<div class="form-sublabel-container"><p class="form-sublabel">* Required</p></div>
<div class="form-submit-container"><input type="submit" class="form-submit" name="Submit" value="" /></div>

<!-- end:form -->


<div class="content-div2">
<h3 class="style1">Other Heading</h3>

<p>Lorem ipsum sit dolor amet...</p>


The text inside the "form-sublabel" class is supposed to be small and dark gray. The standard page text with Lorem ipsum is supposed to be medium-size and light gray.

".body-wrapper p" should only be changing the Lorem ipsum into medium-size light gray, right? But it's changing the "form-sublabel" text into medium-size light gray too, even though "form-sublabel" is defined farther down the stylesheet.

If I put a p in front of the style ("p.form-sublabel"), the issue is corrected. The thing is, I can't figure out why this is happening in the first place. Does anyone care to enlighten me? I'd really appreciate it. Thanks.

04-28-2011, 10:32 PM
The order of css rules is taken into account, but of more significance is the specificity of css selectors. This article (http://www.htmldog.com/guides/cssadvanced/specificity/) introduces the subject.

From the article:
Basically, the more specific a selector, the more preference it will be given when it comes to conflicting styles.

04-28-2011, 10:53 PM
Thank you, thank you thank you thank you thankyouthankyou.