-1

I'm new to CSS, and after learning about ID selectors, the only difference between them and class selectors is the fact you can only have one specific id per element, whereas multiple elements can share the same class name. But then it's easy: name an element a class name that you won't use for any other element. So it seems in that sense, a class can be treated as an I.D.

I'm new to CSS, so I may be missing something here. What advantage do I get using an ID selector over a class selector in a particular case?

Thanks.

jmoerdyk
  • 5,369
  • 7
  • 35
  • 42
John Doe
  • 55
  • 7
  • 2
    possible duplication of: http://stackoverflow.com/questions/33601687/difference-between-id-and-class – Shaher Jamal Eddin Jan 28 '16 at 20:07
  • 1
    Possible duplication of: http://stackoverflow.com/questions/544010/difference-between-div-id-versus-div-class – Alessio Cantarella Jan 28 '16 at 20:08
  • Because if other people looked at your code, they'd assume that class can be used multiple times. Also, because it's best practice, and ID's do take precedence over classes due to their specificity. – Drew Kennedy Jan 28 '16 at 20:09
  • thanks. i can't understand why it's a bad question though. can you explain? – John Doe Jan 28 '16 at 20:11
  • I do not think it's a bad question. There are pros and cons with ID's. To this very day, if you want to select an element in JS, without using libraries, it's the fastest way to return a query and works on all browsers no questions asked. – damiano celent Jan 28 '16 at 20:16

1 Answers1

2

Here are a few reasons that come to mind:

Direct Linking.

You can link directly to a specific element on the page by adding the id to the end of the url. See this post for examples: Link to an element within the current page

Javascript Compatibility.

A lot of JS libraries utilize the differences between classes and IDs. For example, they will treat classes as an array of elements, assuming you want to iterate over all of the instances of that class. IDs on the other hand are assumed to be singular, and whatever functionality you are trying to achieve will look for only a single instance. This has minor (almost unnoticeable) performance benefits, but can also break many functions if not used correctly.

Specificity.

When targeting elements on a page, specificity always comes into play. Since IDs and classes have different weights, using them incorrectly can cause problems when you are trying to keep styles from over-writing each other. See here for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Browser Compatability.

While browsers are getting better at conforming to modern CSS standards, there are always going to be quirks. Not every selector works in every browser and some CSS tricks may break when your users visit your site using an old version of IE or some random build of Safari. That being said, IDs will always work, no matter what. This may not relate to your specific case, but could help prevent headaches down the road.

Best Practices/Readability.

Most importantly IMO, is the readability aspect. When looking over another developer's code, I assume when I see a class being specified in the CSS that whatever styles they have set will affect multiple areas of the page. This means I shouldn't just go changing things without further research. Opposite of that, if I see an ID being used, I can assume that any changes to that particular style will affect only that one area, and there shouldn't be any surprises for me down the road.

Community
  • 1
  • 1
Dryden Long
  • 9,332
  • 2
  • 28
  • 42