Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts

    Nice dumb question.. "id" vs "class"?

    I think I am having a brain cramp.

    I know that you are only supposed to use a "div id" once per page, and you can use "div class" multiple times (although, I think the page will still display fine, but validation will probably fail).

    What is the reason for not just calling all of your divs "classes"? Always wondered. I know that you should normally use "div id" for your footers, headers, etc.

    Guess I just don't totally understand why you cannot just call all of them "div classes". Could some please slap me in the head and explain this please? Thanks, Buffmin

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    No, you can have as many divs with UNIQUE id's on the page as you want, you just cant have more than one div with the SAME id name. For example"

    <div id="oneContent"></div>
    <div id="oneContent"></div>

    is wrong,

    <div id="oneContent"></div>
    <div id="twoContent"></div>

    is fine.

    Classes you can name the same, but need to make sure if you style a classname that has multiple instances, you use specificity when you call them.

    <div id="sidebar"><p class="paragraph">Some text</p></div>
    <div id="content"><p class="paragraph">Some other text</p></div>
    Teed

  • Users who have thanked teedoff for this post:

    Buffmin (03-02-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Got it. Thank you very much. Buffmin

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Ids serve several different purposes while classes are usually only relevant for applying styles.

    In the HTML you can link to the spot in the page where <p id="one"> appears using <a href="#one">

    In JavaScript you can access the id using document.getElementById('one') - while some browsers now also allow document.getElementsByClass, this is a relatively recent addition.

    You can only apply one id to an element but you can apply as many classes as you like eg. <span id="one" class="class1 class2 class3 class4 class5 class6">

    Where both a class and an id attempt to style the same element in different ways the id takes priority.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    Ids serve several different purposes while classes are usually only relevant for applying styles.

    In the HTML you can link to the spot in the page where <p id="one"> appears using <a href="#one">

    In JavaScript you can access the id using document.getElementById('one') - while some browsers now also allow document.getElementsByClass, this is a relatively recent addition.

    You can only apply one id to an element but you can apply as many classes as you like eg. <span id="one" class="class1 class2 class3 class4 class5 class6">

    Where both a class and an id attempt to style the same element in different ways the id takes priority.
    Nice explanation. Thanks !


  •  

    Posting Permissions

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