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 12 of 12
  1. #1
    New Coder
    Join Date
    Jan 2013
    Location
    India
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts

    what is main difference between class and Id?

    This very common question which are asked. I want the main difference with example.

  • #2
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Class can affect several elements.

    ID is typically used for a single element, though you can use it on several elements.

    Id:
    Code:
    #id1 {
    text-align:center;
    color:blue;
    }
    Class:
    Code:
    .colorcode {
    color: red;
    }
    Classes begin with '.'
    ID's begin with '#'

    Hope this helps.


    Here's a helpful link:
    http://w3schools.com/css/css_id_class.asp
    Last edited by Nerevarine; 01-23-2013 at 02:01 PM. Reason: Added link
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #3
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    An "id" is unique and applies to one and only one element on the page. A "class" is not unique and can apply to none, every or some elements on a page.

    CSS
    #unique {color: red;}
    .notunique {color: blue;}

    HTML
    <div id="unique">
    ...
    </div>

    <div id="unique2" class="notunique">
    <p class="notunique">
    ...
    </p>
    </div>

    The "#" denotes an id in the CSS, but is not used in the HTML. The "." denotes a class in the CSS, but is not used in the HTML.
    Last edited by jerry62704; 01-23-2013 at 02:08 PM.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Also, IDs can be used as anchor hooks to link to, e. g.:
    Code:
    <a href="#example">link</a>
    …
    …
    <div id="example">clicking the link above brings me to this element</div>
    And in CSS, IDs have a higher specificity (“importance”) than classes.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by L0adOpt1c View Post
    Class can affect several elements.

    ID is typically used for a single element, though you can use it on several elements.
    You should read the page you linked him..

    The id Selector

    The id selector is used to specify a style for a single, unique element.

  • #6
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Quote Originally Posted by DanInMa View Post
    You should read the page you linked him..
    And you should check your facts.

    And am I not correct in saying that you CAN use them for several elements?

    It's possible. I've done it.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    Quote Originally Posted by L0adOpt1c View Post
    And am I not correct in saying that you CAN use them for several elements?
    You can but I think it was a misunderstanding between you two. The way you said it could be used could be misunderstood that it can be used for several elements in the same document which is definitely wrong. It can generally be used on almost all HTML elements, that’s true, but an ID must occur only once per document.

  • #8
    New to the CF scene
    Join Date
    Jan 2013
    Location
    United States
    Posts
    4
    Thanks
    0
    Thanked 1 Time in 1 Post

    code for class and I.D

    The id selector is used to specify a style for a single, unique element.
    The id selector uses the id attribute of the HTML element, and is defined with a "#".

    The style rule below will be applied to the element with id="para1":

    Example-

    #para1
    {
    text-align:center;
    color:red;
    }

    Now for Class-

    The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.

    Example-
    .center {text-align:center;}

  • #9
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Quote Originally Posted by L0adOpt1c View Post
    And you should check your facts.

    And am I not correct in saying that you CAN use them for several elements?

    It's possible. I've done it.
    No you are not correct. You can give multiple elements the same ID all day long, but its not compliant to the standard and it causes issues if you are trying to target an element with javascript by id if there are mutiple elements with the same id.

    Id's are and always have been meant to be unique. Sorry, you are incorrect.

  • #10
    Regular Coder Nerevarine's Avatar
    Join Date
    Jan 2013
    Location
    Phendrana Drifts, Tallon IV, W-Class
    Posts
    285
    Thanks
    0
    Thanked 17 Times in 17 Posts
    Blog Entries
    3
    Quote Originally Posted by DanInMa View Post
    No you are not correct. You can give multiple elements the same ID all day long, but its not compliant to the standard and it causes issues if you are trying to target an element with javascript by id if there are mutiple elements with the same id.

    Id's are and always have been meant to be unique. Sorry, you are incorrect.


    Sorry, but the person before was correct. Of course you can't use one ID multiple times per page, you can use them across several pages on one website.
    Time kills us in our sleep and we watch it happen in our dreams. -K.K.
    THE END-ALL PROGRAMMING REFERENCE: CLICK HERE (Courtesy of Major Payne)
    My username was previously L0adOpt1c. :: Please read this before posting in the HTML/CSS forum.
    Validate your HTML here and your CSS here. :: Need basic HTML/CSS tutorials? Click here, don't post about it.

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by DanInMa View Post
    You can give multiple elements the same ID all day long, but its not compliant to the standard and it causes issues if you are trying to target an element with javascript by id if there are mutiple elements with the same id.
    It isn't just from JavaScript that specifying multiple copies of the same id breaks. It also breaks in HTML when you link to it.

    If the web page were the world and the id was "Birmingham" and you needed to go there - which Birmingham would you go to?

    Code:
    <div id="Birmingham">England</div>
    
    
    <a href="#Birmingham">go to Birmingham</a>
    
    
    <div id="Birmingham">Alabama</div>
    Almost all of the functionality that applies to ids relies on the fact that there will be only one.
    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.

  • #12
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,639
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by yguyfan View Post
    you can use them across several pages on one website.
    No one has claimed that you can't. It was the claim that you can use the same id multiple times in the same page that was being refuted.
    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.


  •  

    Posting Permissions

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