SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Targeting a div (id and class)

    Can anyone explain to me why the first example works and the other doesn't?

    This is the layout;
    Code:
    <body>
      <div id="header"></div>
    
      <div id="container">
         <div id="content" class="column"></div>
         <div id="left" class="column"></div>
         <div id="right" class="column"></div>
      </div>
    
      <div id="footer"></div>
    </body
    I can style the #content just fine, I do this by #content, and its basic styling is in #container .column.

    Trying to target the same div with "#content .column" yeilds no results.

    But the issue is that I need to style #content differently in a completely different page, the layout is simply;
    Code:
    <body>
      <div id="header"></div>
      <div id="content" class="single"></div>
      <div id="footer"></div>
    </body>
    #content .single does absolutely nothing for me.

    Am I doing something wrong? I've only recently started using classes properly and I don't always apply things correctly, I really would like to actually do this right this time around, I don't want to throw out my #content id in the second page and replace it with #single.

    The div contains exactly the same content, just styled differently.

    Classes make my head spin, help a poor soul out, hey?

  2. #2
    SitePoint Zealot
    Join Date
    Apr 2006
    Location
    Ohio USA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    #content .single would be targeting a child of content with the class of single.

    remove the space between them, and you are targeting #content that has a class of single.
    #content.single

    This similar to what I occasionaly see other people use on divs, though I normaly just use the ID itself.

    div#content = div that has the id of content.

    Another example:
    Code:
    .red {  background:red;  }
    .blue {  background:blue;  }
    .red.blue {  background:purple;  }
      <div class="red">test</div>
      <div class="blue">test</div>
      <div class="red blue">test</div>
    Edit to add - IE does seem to have a problem with my additional example, though it does fine with #content.single.

  3. #3
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh, wow, I totally didn't know that. No wonder it worked 'randomly,' I never thought the space was of any significance.

    This makes a lot of sense now, thanks for your help again!

    Is there some similar rule with the id's and spaces in between them?

    I wasn't aware that you could declare a class within a class, and call it class="class1 class2", but then I've yet to find a good article that explained classes, ids and hierarchies in simple plain English.

  4. #4
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Have you read the CSS specification? This is by definition. The space between id's and classes names indicates "being a child of" sort of thing.

    h1 span would target a span tag that's a child of a h1 (it's inside a h1)

    More complicated.
    div#myId #otherId .anyclass would target any element with the class .anyclass only if it is a child of an element with Id #otherId, and this #otherId needs to be child of a DIV with an id of #myId.

    If the element with class .anyclass is not a child of an elment with an id of #otherId, the css rule will not work.

    If #otherId is not a child of a DIV with an id of #myId, the css rule will not work.

    #myId #otherId.anyclass would target any element that has an id of otherId AND a class of .anyclass, AND at the same time is a child of any element with id #myId

  5. #5
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ICO
    I wasn't aware that you could declare a class within a class, and call it class="class1 class2", but then I've yet to find a good article that explained classes, ids and hierarchies in simple plain English.
    You don't declare a class withing a class. You declare two different classes, that happens to be applied to the same element.

    There are some limitations to that. If two classes (or ids, or a class and an id) are setting the value for the same property, only one of the values will be applied. The value used will be chosen following the cascading rules.

    Example: if you have #myId {background-color: red;} and .myClass{background-color: red;}, but you apply it to the same element:

    <div id="myId" class="myClass"> Text </div>

    only one background color will be set for the div. It depends on the cascading order if the background of the div will be red, or blue.

  6. #6
    SitePoint Zealot ICO's Avatar
    Join Date
    May 2005
    Posts
    121
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So, in other words, the sky is the limit?

    Love it when they say that. Technically, "the browser is the limit"

    I didn't know classes and id's are that flexible, but then I never needed to do much with them before because I dealt with basic pages that didn't hold a great deal of code.

    I mean, I used them, just never needed to distinguish an element inside an element of a certain class that resided in that unique identifier.

    Thanks for the additional info, this'll give me some more stuff to mull over.


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
  •