when to use div id vs div class?

Discussion in 'CSS' started by driven, Sep 22, 2007.

0
  1. #1
    What exactly are the guidelines for using <div id> vs <div class> as I really don't know?
     
    driven, Sep 22, 2007 IP
  2. jmhyer123

    jmhyer123 Peon

    Messages:
    542
    Likes Received:
    25
    Best Answers:
    0
    Trophy Points:
    0
    #2
    well, us div id's for a specific element, when you only have one element that is specific to that id. div class's are for more like menu's or etc. where you repeatedly have menu_header, menu_footer, etc. classes that you use more than once but want them all to have the same characteristics.

    Also, when validating XHTML they will complain if you have more than one div id in your code so if you're using it more than once make it a class ;)
     
    jmhyer123, Sep 22, 2007 IP
  3. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Stomme poes, Sep 22, 2007 IP
  4. Fix Johnson

    Fix Johnson Well-Known Member

    Messages:
    238
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    103
    #4
    Thanks for explanation. Still not quite sure on use for other than under div id, but will play around and learn from results.
     
    Fix Johnson, Oct 27, 2012 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #5
    1) DIV or not doesn't matter. Class and ID are 'core attributes' -- meaning they are valid on ANY tag.

    2) You have to understand what ID's are FOR. While you can use them to apply styling, and that's handy when you need an ID, that is not what they are FOR. ID's are for targeting individual elements -- hence why you should only use them ONCE PER PAGE.

    What do we mean 'targeting'? In javascript using getElementById, or with anchors using the hash tag, replacing the rather large and wasteful nonsense of putting NAME attributes on anchors.

    For example if you had an anchor that read:
    <a href="test.html#section2">Go To Section 2</a>

    and this in test.html:
    <h2 id="section2">Start of Section 2</h2>

    Following that anchor would auto-scroll to that section.

    ... as opposed to the old way circa 1998:
    <a name="section2"></a>

    That has no business on any website written after 2001-ish (when nyetscape 4 was kicked to the curb by developers)

    That's what they are for. class on the other hand exists JUST to apply style. That's what it's for. ID's letting you apply style is just a happy extra effect so you don't need to use both for no good reason.

    Of course if you use semantic markup and a bit of understanding of that "cascading" part of cascading style sheets, you'll probably use a lot less ID's, Classes and DIV. Of course, you look at the idiotic half assed rubbish markup output by the goofballs behind wordpress or joomla... well, let's just say there's the poster children for people who fail to grasp the point of classes, inheritance, cascading, etc.
     
    deathshadow, Oct 27, 2012 IP
  6. xBlueprint

    xBlueprint Greenhorn

    Messages:
    20
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #6
    ID's are used for one element, but if you use ID's on more than one thing you should change it to a class.
     
    xBlueprint, Oct 27, 2012 IP