id vs CSS中的类声明

Question

I have the following html structure

<div id="content">
   <div id="transport">
      <div id="header">Header Text</div>
       <div id="image"></div>
       <div id="right_content">Lots of text</div>
   </div>
 </div>

Is there a better way to arrange the css for the above rather than use ids for all of the divs?

Answer 1

IDs can only be used once in a document. Classes can be reused throughout the document. Styles attached to IDs trump styles attached to classes.

Other than that, it's entirely up to you and the particular content you are marking up.

Looking at your sample code, I would recommend using an actual header tag instead of a div with an ID of header.

Answer 2

Why not change those to classes and have only the top level container with an ID? That way you can target it with the top level ID.

You should also remove the header DIV and use a H2 or H3 tag.

<div id="content">
   <div class="transport">
       <h2>Header</h2>
       <div class="image"></div>
       <div class="right_content">Lots of text</div>
   </div>
 </div>

Your CSS would look like

#content .transport {}
#content h2 {}
#content .image