CSS selectors: Class vs. Id

Question

I've read that type of selectors used in JavaScript (jQuery as well) matters if one wants to achieve better performance in speed, loading times, etc.

Does the same apply to CSS as well? If so which selector is better to use in DOM: id, class, or maybe nested? I'm talking certain elements here (like a specific <ul> and not all <ul>s in general).

There are waaaay too many factors here... so many that there are enough non-performance issues to outweigh the performance issues, for example as you mention the need to select a specific `ul` and not just any `ul` in general. If you have to worry about that, performance is completely moot. — BoltClock, Aug 28 '12 at 14:30
use the simplest selectors (unless there's a conflict, in which case be more specific) ... — Alex, Aug 28 '12 at 14:30

score 2 · Answer 1 · answered Aug 28 '12 at 14:36

I doubt it CSS could cause great rendering troubles in loading time and speed. In my experience I've come to the conclusion you should keep your CSS nice and simple. I've seen things like:

.element1 {...}
   .element1 #element2 {...}
   .element1 #element2 .element3 {...}

But I'd rather go with unique selectors wherever possible and simply describe them as:

.element1 {...}
 #element2 {....}

In my opinion optimizing CSS is quite tricky and you should do it carefully.

score 0 · Answer 2 · edited Mar 25 '13 at 15:38

0

Two HTML elements on a page can not have same id so for single element handling it is good to use ID.. Same class can be used by many elements so for group operations it is good to use class.. In performance wise both works good for me

edited Mar 25 '13 at 15:38

ashgkwd

195
11

answered Aug 28 '12 at 14:32

Aravindhan

3,566
7
26
42

The statement that you cannot have two HTML elements with the statement is not actually true (http://jsfiddle.net/sBPkM/), although it's not good practice. I think you may be referring to Visual Studio preventing HTML elements that refer to a server-side control, that cannot have two elements of the same ID. – dbooth Aug 28 '12 at 14:41
when using jquery and javascript in event handling having same ID leads to conflict right.. – Aravindhan Aug 28 '12 at 14:45
@dbooth: Yeah. The spec says "must not", but of course people write invalid markup, and browsers have to deal with invalid markup in the best way they know how. Also, ID selectors are implemented differently in JS and in CSS, hence the inconsistent behavior. See [this answer](http://stackoverflow.com/questions/7262195/several-elements-with-the-same-id-responding-to-one-css-id-selector/8753329#8753329) and the comments on [this question](http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left). – BoltClock Aug 28 '12 at 15:15

score 0 · Answer 3 · answered Aug 28 '12 at 14:36

0

as I have read many times IDs are faster for finding elements than classes as elements with ID are stored as a hash table and the search is faster.

Unfortunately I don't know any resource to prove or reject this, but as I have already said I have seen this kind of statements a lot.

answered Aug 28 '12 at 14:36

haynar

5,961
7
33
53

1

Just, you know, don't code based on that knowledge. Code based on your markup. – BoltClock Aug 28 '12 at 14:40
1

@BoltClock of course every rule should be used according to the situation and not just because it is true or I think that it could be true – haynar Aug 28 '12 at 14:44

CSS selectors: Class vs. Id

3 Answers3