More Speed

Sitepoint Memebers,
Does the id selector function do anything that can’t be done with a class selector.

I have a bunch of div#s in my CSS:

div#content{position:relative;float:left;wid…}
div#colmid{float:left;width:200%;marg …}
div#colleft{float:left;width:100%;margin-left:-50%;…}
div#col1wrap{float:left;width:50%;position:relative;right:160px}
div#col1{left:200%;overflow:hidden;position:relative;margin:0 170px}
div#col2{right:10px}
div#col3{margin-right:30px;left:50%}

and I wonder if there’s a way to speed them up like Sitepoint explained to me about class selectors.

I rememebr Noonnope saying:
For div.firstimg{…} the browser must:

  • identify which elements have the class=“firstimg” values
  • then filter only the div tags from its findings

With firstimg{…} the browser only has to identify which elements have the class=“firstimg” values (1 step).

So I removed all the selectors and it worked great.

So can’t I just change
css: div#content{position:relative;float:left;wid…}
html:<div id=“content”>
to
.content{position:relative;float:left;wid…}
html:<div class=“content”>

Thanks,

Chris

the selector is just to select, so if cou change all your id into class atributtes AND do that in the CSS

however since you know that every .col1 is a DIV , there is no need to add the DIV part and just say .col1{…}

Gar onn,
What if I just remove the Divs?

Content{position:relative;float:left;wid…}
#colmid{float:left;width:200%;marg …}
#colleft{float:left;width:100%;margin-left:-50%;…}
#col1wrap{float:left;width:50%;position:relative;right:160px}
#col1{left:200%;overflow:hidden;position:relative;margin:0 170px}
#col2{right:10px}
#col3{margin-right:30px;left:50%}

and keep the html the same e.g. <div id=“content”> <div id=“colmid”>

I just don’t see how id=“…” does something that class=“…” can’t.

Thanks,

Chris

I just don’t see how id=“…” does something that class=“…” can’t.

Hi,

I’m not sure what you are asking there but you can use either class or id and the speed should be the same as css works from right to left and the match is made instantly.

.test or #test is pretty much equivalent except that ids carry more weight of course and must be unique whereas classes carry less weight and can be used on multiple elements. A class can do everything that an id can do but an id cannot do everything a class can do as ids are unique and can only be used once. If you wanted you could just use classes for the whole page with no ill effect but you would be hard pushed to user ids for everything because they are not re-usable.

I use ids for main structural elements that are unique in the page (e.g. #header,#footer, #nav, #main, #sidebar); for most everything else use classes unless you know the element is completely unique.

Paul,
That’s what I wondered. Classes are just as unique if you use a class only one time. Have any idea why ids were developed?

Thanks,

Chris

You could just use classes but it makes things more awkward if using javascript. Id’s address an element uniquely and therefore you can find an element easily if using javascript. On the other hand finding a specific element by class name is more complicated because there could be many.

id (HTML attribute)
ID Selector (CSS selector)
Class Selector (CSS selector)

They both have their uses in the right place :slight_smile:

That’s true, but classes may be unique, ids must be unique.
For example for stuff like the header, footer, main menu, etc I would use an id, since those are elements it doesn’t make sense to have multiple of them.