Magento Expert Forum - Improve your Magento experience

Results 1 to 6 of 6

Difference between id and class in css with example?

  1. #1

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

    Default

    CSS obviously needs these so that we may build selectors and do our styling, but other web languages like Javascript depend on them too. Main diffrencce between ID's and Classes are:
    ID's are unique.Each element can have only one ID. Each page can have only one element with that ID
    Example:

    #element {
    background: blue;
    }

    body div.element {
    background: green;
    }
    Classes are NOT unique. You can use the same class on multiple elements and same elements.
    Example:

    .element {
    background: blue;
    }

  3. #3
    Junior Member
    Join Date
    Sep 2016
    Posts
    228
    Thanks
    0
    Thanked 3 Times in 3 Posts

    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.

    Promotional Pen Drive

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

    Default

    Class - Use a class 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.
    Examples of class names are: tag, comment, toolbar-button, warning-message, or email.

    ID - Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page.
    Examples of ids are: main-content, header, footer, or left-sidebar.

    A good way to remember this is a class is a type of item and the id is the unique name of an item on the page.

  5. #5
    Junior Member
    Join Date
    Dec 2016
    Posts
    77
    Thanks
    1
    Thanked 1 Time in 1 Post

    Default

    an ID is unique, a class is NOT
    there can be only one element in an HTML document (webpage) with an id attribute set to "bla" while there can be (0 t0 infinity) number of elements with class = "blaBla"

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

    Default

    The biggest difference is that a document can have multiple elements with the same class, but not with the same ID.
    An Identifier must be specific to a certain element within a document. Id's are unique.

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
  •