CODEWITHSUNDEEP
htmlcssclasstags
Eedis
Eedis

Reputation: 25

Difference in Class and ID for CSS

Okay, so I understand how to use both, but really what is the point other than semantics? I mean, what negative effect would it have if I created a class for a single, unique, element and only used it on that element?

Also, I know you can assign only certain elements to be effected by a class, for instance:

p.class{blazziblazzi}

Now, only the element 'p' will be effect by that class, if that element is assigned to that class. So why would anybody ever assign that class to an element if they didn't want that element to take on the attributes of that class?

I just don't get why they even made ID and Class separate, it seems pointless to me.

Any pointers would help, thanks!

Upvotes: 0

Views: 102

Answers (4)

Nathaniel
Nathaniel

Reputation: 952

  • 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.

http://css-tricks.com/the-difference-between-id-and-class/

Classes should not use it to rewrite code, I mean you must avoid writing the same, then for that you use a class, instead of assigning each id the same attributes.

For example:

If you have two elements: 

<div id="div1" class="divYellow">
</div> 
<div id="div2" class="divYellow">
</div>

if you want yellow background color, you could do so:

# div1 { background-color: yellow; } 

  \# div2 
  {
      background-color: yellow; 
  }

but it would be best that you did so:

. divYellow { background-color: yellow; }

This way when you want to make a change, you just do it in class, and not in two places

Upvotes: 3

TijmenBan
TijmenBan

Reputation: 1

U could for example shorten your CSS. By using a classname multiple times you could save some lines inside your CSS. I would only recommend this if you want to use a large part of your CSS for multiple div's. The small changes could be made within the different ID's if the classnames remain the same.

Upvotes: 0

bboysupaman
bboysupaman

Reputation: 1334

Specificity is one of the reasons. You can follow the link in the comments for info on that. Additionally, when you need to add anchor links, you have to use id's, classes will not work. Also, id's are particularly useful for specifying items while using javascript and other languages. In CSS, there is no harm in specifying a class for a single item, but it is a better practice to use id's for unique elements and classes for elements that may mimic the styles of other elements.

Upvotes: 1

Fallenreaper
Fallenreaper

Reputation: 10682

if using an ID will stop at the first occurrence.
If it is a class, it will scan the entirety of the document to make sure there aren't other occurrences.

Even if there is 1 occurance of a class, it still needs to scan the entire document to make sure there are none. It leads to issues with selection and runtime of fetching data, given various selectors.

Upvotes: 0

Related Questions