SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Specifying CSS?

  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Specifying CSS?

    Hi

    I am a little confused when specifying CSS. If I have a mainwrapper div and within that a content div and within that want to specify a h1 would the CSS be

    #mainwrapper #content h1 {font-family etc in here}

    or can it just be #content h1 {font-family etc in here} ?

    Thanks for your help

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    So, if you have this structure:
    Code:
    <div id="mainwrapper">
        <div id="content">
            <h1>I'm a header.</h1>
        </div>
    </div>
    You could access it with any of the following:
    1) #mainwrapper h1 /* Would affect any h1 in #mainwrapper, no matter how deep it is nested. */
    2) #mainwrapper #content h1 /* Would affect any h1 in #content, no matter how deep it is nested. */
    3) #mainwrapper #content > h1 /* Would affect any h1 directly within #content, and not any nested any deeper. */
    4) #mainwrapper > #content > h1 /* Same as number 3, but only if #content is directly within #mainwrapper as well. */
    5) #mainwrapper > #content h1 /* Would affect any h1 within #content, as long as content is directly in #mainwrapper */
    6) #content h1 /* Same as number 2, only better because it is shorter (smaller filesize). */
    7) #content > h1 /* Same as number 3, only better because it is shorter (smaller filesize). */

    You could not access it with:
    #mainwrapper > h1 /* This would only affect any h1's directly in #mainwrapper, none that are nested deeper.

    Because > signifies a direct child. Also, note that > isn't supported in IE6. Hope that helps clear things up.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thank you so there are several ways of specifying I didn't realise that, so either way would be correct. I was experimenting with dreamweaver in design view and its CSS inputter and it does it the long way round #mainwrapper #content h1 {font-family etc in here} whereas if I was handcoding I would have probably just put in #content h1 {font-family etc in here}

    Thanks for your help, it makes more sense now

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    There is no need to use the full path to the h1 unless you are wanting to add more weight to the rule and over-riding something else.

    #content h1 is fine

    Also note that id's carry more weight than classes and if you added a class to the h1 like this:

    h1.test{color:red}

    Then the color may not be applied if you have defined a color via an id such as #content h1{color:black}

    The color will still be black because the id carries more weight. You would need to have said:

    #content h1.test{color:red}

    Now it will be red

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you


Bookmarks

Posting Permissions

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