Magento Expert Forum - Improve your Magento experience

Results 1 to 20 of 20

Difference between class and id in css ?

  1. #1

  2. #2
    Junior Member
    Join Date
    Jan 2015
    Posts
    97
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ID selector is used to unique and you can't reuse id but class is used for multiple elements i-e more then 1 <p> tags can be of same class ..

  3. #3
    New member eli_jay's Avatar
    Join Date
    Jan 2015
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ID is higher priority in CSS. But you should use them as the name meaning. Use ID if you want to call one element and use class if you want to call all elements of that class

  4. #4
    Junior Member
    Join Date
    May 2015
    Posts
    50
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Div
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #center
    {
    text-align:center;
    }
    </style>
    </head>

    <body>
    <h1 id="center">Center-aligned heading</h1>
    <p id="center">Center-aligned paragraph.</p>
    </body>
    </html>

    Class

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .center
    {
    text-align:center;
    }
    </style>
    </head>

    <body>
    <h1 class="center">Center-aligned heading</h1>
    <p class="center">Center-aligned paragraph.</p>
    </body>
    </html>

  5. #5
    Junior Member
    Join Date
    Feb 2015
    Posts
    316
    Thanks
    0
    Thanked 3 Times in 3 Posts

    Default

    Yup, classes can be applied to multiple elements on a single page, whereas ID's can only be used once on any given page.

    ID's are also used to allow JS to identify a certain element. For example, if you want to grab an element with a certain ID and perform some sort of action on that element, you use JS to identify it like so:

  6. #6
    Junior Member
    Join Date
    Mar 2015
    Posts
    295
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    For detail notes about difference between in class & id in CSS- https://css-tricks.com/the-differenc...-id-and-class/

  7. #7
    Junior Member MrJaswal's Avatar
    Join Date
    Apr 2015
    Location
    Ludhiana,Punjab,India
    Posts
    29
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by thaonvp View Post
    Difference between class and id in css ?
    Class is used when we have to use CSS property in many locations and id You can assign a class to many elements.

  8. #8
    Junior Member
    Join Date
    Mar 2016
    Posts
    95
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I'm fresher in the designing. So thats why i am confusing to work with id and classes in CSS.

  9. #9
    Junior Member
    Join Date
    Mar 2016
    Posts
    209
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    ID, short for fragment identifier, is a beautiful attribute, but it's very easy to use them improperly. You can only use an ID name once in any XHTML or HTML document.

    Classes, like ID's, can also be used to in JavaScript scripts, but unlike ID's, they can be used multiple times in the same HTML document.

  10. #10
    Junior Member
    Join Date
    Dec 2015
    Location
    India
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by yasar View Post
    Div
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #center
    {
    text-align:center;
    }
    </style>
    </head>

    <body>
    <h1 id="center">Center-aligned heading</h1>
    <p id="center">Center-aligned paragraph.</p>
    </body>
    </html>

    Class

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .center
    {
    text-align:center;
    }
    </style>
    </head>

    <body>
    <h1 class="center">Center-aligned heading</h1>
    <p class="center">Center-aligned paragraph.</p>
    </body>
    </html>
    Thanks For Sharing the Information.

  11. #11
    Expert
    Join Date
    Mar 2016
    Location
    india
    Posts
    570
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." A simple way to look at it is that an id is unique to only one element

  12. #12
    Junior Member
    Join Date
    Aug 2016
    Posts
    184
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    The class selector uses the HTML class attribute, and is defined with a.
    A simple way to look at it is that an id is unique to only one element.

  13. #13
    Junior Member
    Join Date
    Aug 2016
    Posts
    41
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    The class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector uses the HTML class attribute, and is defined with a "." A simple way to look at it is that an id is unique to only one element.

    ID's are unique

    Each element can have only one ID
    Each page can have only one element with that ID

    Classes are NOT unique

    You can use the same class on multiple elements.
    You can use multiple classes on the same element.

    To know more visit- https://css-tricks.com/the-differenc...-id-and-class/

  14. #14
    Junior Member
    Join Date
    Oct 2016
    Posts
    984
    Thanks
    1
    Thanked 4 Times in 4 Posts

    Default

    Class is used when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links. Additionally, a given element can have more than one class associated with it, while an element can only have one id. For example, you can give a div two classes whose styles will both take effect. Furthermore, note that classes are often used to define behavioral styles in addition to visual ones. For example, the jQuery form validator plugin heavily uses classes to define the validation behavior of elements. Examples of class names are: tag, comment, toolbar-button, warning-message, or email.

    Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. Examples of ids are: main-content, header, footer, or left-sidebar.

  15. #15
    Junior Member
    Join Date
    Aug 2016
    Posts
    41
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    ID's are unique as Each element can have only one ID and Each page can have only one element with that ID wheras Classes are NOT unique. You can use the same class on multiple elements and You can use multiple classes on the same element.

  16. #16
    New member
    Join Date
    Dec 2016
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    ID's are unique

    Each element can have only one ID, and each page can have only one element with that ID

    When I was first learning this stuff, I heard over and over that you should only use ID's once, but you can use classes over and over. It basically went in one ear and out the other because it sounded more like a good "rule of thumb" to me rather than something extremely important. If you are purely an HTML/CSS person, this attitude can persist because to you, they really don't seem to do anything different.

    Here is one: your code will not pass validation if you use the same ID on more than one element. Validation should be important to all of us, so that alone is a big one.

    Classes are NOT unique

    You can use the same class on multiple elements.
    You can use multiple classes on the same element.
    Any styling information that needs to be applied to multiple objects on a page should be done with a class. Take for example a page with multiple "widgets":

    <div class="widget"></div>
    <div class="widget"></div>
    <div class="widget"></div>


    You can now use the class name "widget" as your hook to apply the same set of styling to each one of these. But what if you need one of them to be bigger than the other, but still share all the other attributes? Classes has you covered there, as you can apply more than one class:

    <div class="widget"></div>
    <div class="widget big"></div>
    <div class="widget"></div>


    No need to make a brand new class name here, just apply a new class right in the class attribute. These classes are space delimited and most browsers support any number of them (actually, it's more like thousands, but way more than you'll ever need).

  17. The Following User Says Thank You to saadtaimoor For This Useful Post:

    shahabhameed (06-12-2016)

  18. #17
    Junior Member
    Join Date
    Sep 2016
    Posts
    335
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    The class attribute can be used with multiple HTML elements/tags and all will take the effect. Where as the id is meant for a single element/tag and is considered unique.

  19. #18
    Junior Member
    Join Date
    Feb 2017
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    classes can be applied to multiple elements on a single page, whereas ID's can only be used once on any given page.

  20. #19
    Junior Member
    Join Date
    Oct 2016
    Location
    MONA TILES COMPOUND, NR. CHHANI CIRCLE, CHHANI ROAD, VADODARA - 390002. GUJARAT, INDIA.
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ID's are also used to allow JS to identify a certain element. For example, if you want to grab an element with a certain ID and perform some sort of action on that element

  21. #20
    Junior Member
    Join Date
    Mar 2017
    Posts
    30
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    class selector is most often used on several elements.
    Css is used to design our website

Bookmarks

Posting Permissions

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