On external style sheets my divs look something like this

#main-content {...}

Is it different than this?

div#main-content {...}

If so, when would one be used over the other or are they the same and one is better?


2 answers


If you are coding your HTML correctly and have only one element with ID of "main-content," then the selectors are functionally equivalent. (1)

However, according to Google's research, using the div#main-content method makes browsers take slightly longer to render your styles. The reason for this is that the browser will first parse the document looking for all divs, then parse the results for #main-content. It is faster to just find #main-content the first time.

(1) An exception to this would be if you have different pages where #main-content represents different things. For instance a ul#main-content and a div#main-content. However, this is probably a bad coding practice due to the confusion it could create. Keep your id usage consistent across pages if at all possible.

Answered over 8 years ago by Joshua Clanton
  • but you might have more than one element with the same ID on different pages controlled by the same stylesheet. Tony Crockford over 8 years ago
  • True, but I'd consider that a bad coding practice likely to introduce confusion. I'll update the answer to reflect your point, though. Joshua Clanton over 8 years ago
  • Totally agree with Joshua. Using the same ID for different elements on different pages is a bad idea. Big sites can get very messy and hard to maintain when this is done. I've inherited some and it's not fun! I didn't know about the rendering speed difference though - interesting. Simon Holmes over 8 years ago
  • I'm not saying I would use the same ID on different pages, I'm saying you could I do use the same class for different elements, don't you? That google research has some strange suggestions that might make pages load faster (ms?) but would take away the advantages of CSS in terms of maintainability - CSS in the head? classes, not element names? not sure I'd be keen to use everything in there... Tony Crockford over 8 years ago
  • Another reason why you might add the element to the ID, is to help with future maintainability. #title could be anywhere on the page and any element. using div#title makes it quite clear what element you're looking for on the page. Tony Crockford about 8 years ago

No difference whatsoever, at least not to the human eye. The answer joshua gave is good. But i mostly use the latter in my external css files. Only to improve readability. I try to have my css in the same semantic layout as my html. so this markup in my html

<div id="main">
    <div id="sub1">
        <div id="subsub1">
    <div id="sub2">

Would look like this in my css

div#main {}
div#main div#sub1{}
div#main div#sub1 div#subsub1 {}
div#main div#sub2{}

I found this to be easily read, also by other developers who for the first time see my css. Not really necisary tough, just do what comes easiest for you, but if you're on a project that has more members, or a project you have to carry over to someone else, make sure its readable, and if not, COMMENT ALOT. i hate it when i get a half finished website in my hands which is poorly documented and very unreadable

Answered about 8 years ago by Menno Geelen