SitePoint Sponsor

User Tag List

Results 1 to 10 of 10

Thread: class= id=?

  1. #1
    SitePoint Zealot LunaC's Avatar
    Join Date
    Feb 2001
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    class= id=?

    What's the difference between saying:
    <div class="whatever">
    and <div id="whatever">

    other that how it's written in the style sheet
    (ie: .whatever and #whatever)?

    Should one be used only at certain times? One work better in more browsers?

  2. #2
    You talkin to me? Anarchos's Avatar
    Join Date
    Oct 2000
    Location
    Austin, TX
    Posts
    1,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A class is applied to multiple elements whereas an id is applied to a single element.

  3. #3
    SitePoint Zealot LunaC's Avatar
    Join Date
    Feb 2001
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure what you mean...
    Can you please explain that in a little more detail? I'm very new to css.

    Thanks for your help.

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    a class is something that you can apply to several different elements on a page. For example.

    <b class="red">danger</b>

    could be used after a list of products to tell people that this product is hazardous.

    An ID is like a class, but each ID must be a unique page element. ID's are typically used for dHTML work as you must be able to reference each ID individually to tell it to do something using Javascript. Example:

    <div id="layerOne">some content here</div>

    <div id="layerTwo">some content here</div>

    Now, I could reference layerOne and tell it to do something such as "hide this layer" or "move from here to there" or change the contents from bold to italic.

    Understand now?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Actually, ID could be used in multiple instances (though it wouldn't validate properly as XHTML Strict or anythign) and a dHTML call would affect all of the elements named that.

    Granted, it's clumsy, just saying it COULD be done. It had BETTER NOT on my watch But it could
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  6. #6
    SitePoint Zealot LunaC's Avatar
    Join Date
    Feb 2001
    Posts
    176
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ahhh

    I get it, thanks!

    Guess I should redo some of my pages again

  7. #7
    SitePoint Enthusiast
    Join Date
    Mar 2001
    Location
    Madison, Wisconsin
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    One other thing about classes vs. id...

    when you have a zillion different style rules spread out a couple of sheets, you need to worry about the Cascading Order and which styles have greater weight than other styles. In times such as that, elements with an id declaration have a much greater weight than a class declaration.

    Doug

  8. #8
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    weight?

    Sorry, but class is directly inherited from the CSS declaration and is only superseded by inline (id) declarations.

    It's just hierarchy. Just as BODY {font-family:arial} P {font-family:verdana} will produce a verdana result inside a <p>, something defined in a class and an id (where the element has both class and id (though I have yet to see a dual, conflicting declaration)) the id will win out.
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright

  9. #9
    Victory shall be mine tubedogg's Avatar
    Join Date
    Mar 2001
    Location
    Medina, OH
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sort of related here - if I had this on a page:
    Code:
    #content { color: #000000; font-family: Verdana,sans-serif; font-size: 10px; }
    .big { font-size: 14px; }
    .highlight { color: #999999; }
    and then did
    Code:
    <div class="content" align="center">
    <span class="big">My <b class="highlight">Text</b></span>
    </div>
    would the word "Text" be #999999, size 14, Verdana? I mean can I do nested tags per se? With a span wrapped around it and a class inside that?
    Kevin

  10. #10
    SitePoint Wizard silver trophy Jeremy W.'s Avatar
    Join Date
    Jun 2001
    Location
    Toronto, Canada
    Posts
    9,121
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    yes, and any conflicting ones have hierarchy applied.
    SVP Marketing, SoCast SRM
    Personal blog: Strategerize
    Twitter: @jeremywright


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
  •