Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Difference between id and class attribute

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 283
    Comment on it

    1) There are many different kind of CSS selector which we can use to apply CSS style to an element in html. ID and Class are one of them.

    Using Class attribute are easier as compared to id because of the negative effects of an ID selector (the non-reusability, the high specificity).

    In CSS Ids & classes in not having much more differences but in JavaScript there is lots of differences.

    First of all it is a rule and we should go according to the rule.

    2) Ids are denoted by hash (#) symbol whereas classes are denoted by dot (.) symbol.

    example:

    #header
    {
    Width:100%;
    display:block;
    margin: 0 auto;
    }
    
    
    .menu
    {
    color:green;
    background-image: url("../images/banner_bg.png");
    background-size: cover;
    }
    
    
    <body>
    <header id="header">
    
    
    </header>
    
    
    <div class="menu">
    </div>
    </body>
    

    3) Ids can be used for single element whereas a single class can be used for multiple elements. Ids are identifiers and they are unique where as classes are a class of style and there are not unique. If you use the same id on more than one element then the code won't pass validation. Class allows you to avoid repeating styles unnecessarily. You can also include multiple classes using a single attribute.

    example:

    #header
    {
    Width:100%;
    display:block;
    margin: 0 auto;
    }
    
    .menu
    {
    color:green;
    background-image: url("../images/banner&#95;bg.png");
    background-size: cover;
    }
    
    .slider
    {
    float:left;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    }
    
    <body>
    <header id="header">
    <nav class="menu">
    <nav>
    </header>
    <nav class="menu slider">
    </nav>
    </body>
    

    4) Ids can be called through URL whereas classes cant be called through URL.

    example:

    In any browser if you want to go to a particular part just write the URL like http://your domain.com#comments.

    Since this (#) id is unique so when you will run this URL in browser,the browser will go directly on comments section of web page.

    5) We can put id & classes on a single element.

    example:

    <id="comment" class="item">.
    
    
    here id comment will be written like 
    
    
    #comment
    {
     color:blue;
    
    
    border:1px solid black;
    
    
    }
    
    
    classes item will be written like
    
    
    .item
    {
    Display:block;
    
    
    float:left;
    
    
    }
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: