4 ms·

Note that this article is from 2011. Trying his tests on firefox 20 beta, shows no difference between id and class selectors (the article says there was minima

by janzer 14y ago

Note that this article is from 2011. Trying his tests on firefox 20 beta, shows no difference between id and class selectors (the article says there was minimal difference in ff6), also no difference between between the type and "heavily overqualified descendant" selectors (article reports a large difference) and the latter pair are approximately twice faster than the former (the article seems to report they were up to 40 times slower). So beware that browser technology has progressed since the time of this writing. Of course once again you should be checking the behavior of your site with the browsers your users are actually using. [Edit: originally confused the two pairs of tests in my browser tabs, the slow tests in ff6 are actually the faster tests in ff20]

csswizardry 14y ago
Yep, I should probably add something to the article about this; browsers now are so fast that tests show little to no difference :)
- youngtaff 14y ago
  Browser makers have also done a fair bit of work to speed up the selectors - I'll see if I can find the article
nemetroid 14y ago
The only reason id selectors would be faster (that I can think of) is that ids are supposed to be unique, so the matching can stop after finding the first element with an id. However, none of the browsers I tested this in actually did so. Here's an example: http://jsfiddle.net/zsjrN/ http://jsfiddle.net/zsjrN/ Only the first paragraph should be red.
- aptwebapps 14y ago
  Ids are supposed to be unique but I don't think that browsers are supposed to assume that they are.
- ams6110 14y ago
  There are a lot of "supposed to" rules in HTML and CSS that many people violate in practice, and browsers for the most part try to accomodate that if they can. Not surprised to hear that non-unique ids are permitted.
- talmand 14y ago
  The only time I've known that the uniqueness of ids to be in play is either as a target of an anchor or to be used in Javascript. As far as I know, in those cases only the first element with that id will be involved. Removing the CSS from your example, and then using Javascript to change the color you see that only the first one is altered. http://jsfiddle.net/KQkJE/1/ http://jsfiddle.net/KQkJE/1/ So, in terms of CSS, it doesn't really matter. Well, I don't know about performance issues with it though. But for Javascript it matters a great deal. As for HTML, it only really matters in that it's supposed to be unique for anchor targets, which would be one reason it doesn't validate. Browsers give a great deal of leeway when it comes to HTML and CSS, because so many people and editors do not follow the spec. Of course, you could argue that no one follows the spec because the browsers don't really enforce it. I've been constantly amazed over the years seeing various examples of HTML soup that should not render in any recognizable form that somehow renders in the browser.
- weareconvo 14y ago
  In practice, since so many web developers violate the rule about ids being unique, I think browser devs are forced to make the ID map into a multi-map, which makes it exactly the same as the class map.

by janzer 14y ago

csswizardry 14y ago

Yep, I should probably add something to the article about this; browsers now are so fast that tests show little to no difference :)

youngtaff 14y ago
Browser makers have also done a fair bit of work to speed up the selectors - I'll see if I can find the article

nemetroid 14y ago

The only reason id selectors would be faster (that I can think of) is that ids are supposed to be unique, so the matching can stop after finding the first element with an id. However, none of the browsers I tested this in actually did so. Here's an example: http://jsfiddle.net/zsjrN/ http://jsfiddle.net/zsjrN/ Only the first paragraph should be red.

aptwebapps 14y ago
Ids are supposed to be unique but I don't think that browsers are supposed to assume that they are.
ams6110 14y ago
There are a lot of "supposed to" rules in HTML and CSS that many people violate in practice, and browsers for the most part try to accomodate that if they can. Not surprised to hear that non-unique ids are permitted.
talmand 14y ago
The only time I've known that the uniqueness of ids to be in play is either as a target of an anchor or to be used in Javascript. As far as I know, in those cases only the first element with that id will be involved. Removing the CSS from your example, and then using Javascript to change the color you see that only the first one is altered. http://jsfiddle.net/KQkJE/1/ http://jsfiddle.net/KQkJE/1/ So, in terms of CSS, it doesn't really matter. Well, I don't know about performance issues with it though. But for Javascript it matters a great deal. As for HTML, it only really matters in that it's supposed to be unique for anchor targets, which would be one reason it doesn't validate. Browsers give a great deal of leeway when it comes to HTML and CSS, because so many people and editors do not follow the spec. Of course, you could argue that no one follows the spec because the browsers don't really enforce it. I've been constantly amazed over the years seeing various examples of HTML soup that should not render in any recognizable form that somehow renders in the browser.
weareconvo 14y ago
In practice, since so many web developers violate the rule about ids being unique, I think browser devs are forced to make the ID map into a multi-map, which makes it exactly the same as the class map.