1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS - ID's and Classes

Discussion in 'HTML, Graphics & Programming' started by Slime101, 28 Feb 2006.

  1. Slime101

    PermaBanned

    Joined: 18 Oct 2002

    Posts: 12,841

    Location: Lost!

    When should one use ID's and when should you use Classes?
     
  2. Beansprout

    Man of Honour

    Joined: 31 Jan 2004

    Posts: 16,316

    Location: Plymouth

    ID is unique, class is not - so for example, <div id="header"> as opposed to <div class="box">. There's only one header on a page, but there could be lots of boxes :)
     
  3. Slime101

    PermaBanned

    Joined: 18 Oct 2002

    Posts: 12,841

    Location: Lost!

    cool ta :)
     
  4. roboffer

    Sgarrista

    Joined: 18 Oct 2002

    Posts: 9,599

    Location: Sunderland

    Thats pretty much it, also you can give some meaning through using ids in you css - so if someone else sees a style defined for an id in your css, they know that that element should only appear once on a page.
     
  5. Augmented

    Soldato

    Joined: 18 Oct 2002

    Posts: 5,464

    Location: London Town

    The nature of IDs as unique identifiers means they're also incredibly useful for interacting with specific elements of a page. Examples being (for an element with id "contact"):
    • Using a fragment identifier in a URL - www.example.com/details.htm#contact.
    • Accessing an element through the DOM with scripting - Javascript's getElementById('contact') function.
     
  6. robmiller

    Capodecina

    Joined: 26 Dec 2003

    Posts: 16,522

    Location: London

    Although don't feel obliged to litter your code with unnecessary IDs if you just want to access the elements via Javascript; instead, use something like Simon Willison's getElementsBySelector() to select the element(s) via a CSS selector. So, with the markup:

    Code:
    <div id="header">
    
    <h1>Title</h1>
    
    <ul>
        <li>lalala</li>
        <li><a href="#">lol</a></li>
    </ul>
    
    </div>
    
    You don't need to add an otherwise unnecessary ID to the <ul> to access it via Javascript, you can access it just as you would with CSS:

    Code:
    var nav = document.getElementsBySelector('#header ul');
    
    Leaner markup + unobtrusive Javascript = Lovely :)
     
  7. paulsheff

    Hitman

    Joined: 16 May 2005

    Posts: 680

    You usually get validation errors with multiple uses of the same id.
     
  8. Al Vallario

    Mobster

    Joined: 3 Aug 2005

    Posts: 4,534

    Location: UK

    You always do, because it is an error :)
     
  9. Augmented

    Soldato

    Joined: 18 Oct 2002

    Posts: 5,464

    Location: London Town

    While the function's great, it's got limited scope. With just descendant and attribute support, what happens if you have more than one list element and you want to only want to access one particular list - which do you pick out of the array? Or what happens when you move that particular list to a different part of the page?

    If an element needs to be targeted, then use an ID, that is the purpose of the attribute. No point avoiding an ID for the sake of a few bytes. Personally I'd feel in many scenarios that the initial overhead of a 6KB+ script is worse than adding an ID where it's actually appropriate :).
     
  10. paulsheff

    Hitman

    Joined: 16 May 2005

    Posts: 680

    Haha and there was me trying to be conservative with the truth. :D