Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2008
    Location
    MD, USA
    Posts
    65
    Thanks
    16
    Thanked 0 Times in 0 Posts

    '.body-wrapper p' overriding class lower in stylesheet - why?

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

    Code:
    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:

    Code:
    <div class="body-wrapper">
    
    <div class="content-div1">
            	<h2 class="style1">Heading</h2>
    
                <form>
                <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>
    
                    
                    <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>
                    </div>
                    
                </div>
                </form>
                <!-- end:form -->
    
    </div>
            
            <div class="content-div2">
            	<h3 class="style1">Other Heading</h3>
                
                <div>
                	<p>Lorem ipsum sit dolor amet...</p>
                </div>
                
            </div>
    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.
    Last edited by mssteph; 04-28-2011 at 08:52 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    The order of css rules is taken into account, but of more significance is the specificity of css selectors. This article 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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    mssteph (04-28-2011)

  • #3
    New Coder
    Join Date
    Jul 2008
    Location
    MD, USA
    Posts
    65
    Thanks
    16
    Thanked 0 Times in 0 Posts
    Thank you, thank you thank you thank you thankyouthankyou.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •