CSS div style - should I use class or id?

Question

I have a repeater of div's that look a little bit like this:

<div class="header_div">
    <!-- Content -->
</div>

I want to have the background color of the divs change based on a dynamic property of the content of the div (lets call it the category), but I still want the "header_div" style to be assgined in cases where I dont have a css class for that category. Whats the best way of doing this?

The best way I can think of is to render the category as the "id" of the div and apply styles based on the id, but that strikes me as really messy - standards dictate that the id should uniquenly identify the element on the page and there will definitely be repeats of each category.

Answer 1

Without knowing more about your content, can you not use one of the header tags (<h1> etc)?

You are correct, IDs should be unique and if you want to use the same style more than once then use a class.

Answer 2

If it's going to be used repeatedly on the page, it should be a class.

If it's unique on the page, use an id.

Answer 3

You can't have duplicate IDs so if you had multiple divs of the same category you would have an issue. Classes should be used when the style needs to be applied for 1 or more items on a single page.

Why not assign the class on databinding of the div based on the category? As your repeater is getting bound, find your div for the item you are binding and assign it.

You could also substitute the div for an asp:Panel and use it's onDataBinding method. It should look exactly like your div.

Answer 4

The simple answer would be to use multiple classes for the <div> so that

<div class="header_div header_red">
    <!-- Content -->
</div>

<div class="header_div header_green">
    <!-- Content -->
</div>

Answer 5

You're correct about the need for IDs to be unique. There's nothing stopping you from specifying more than one value per class attribute - just separate them with a space.

<div class="header_div category">
    <!-- Content -->
</div>

Just be careful to check what happens when both classes specify different values for the same style - I can't say whether the first or the second would take precedence.

Answer 6

You could supply multiple styles for the div class:

<div class="header_div mystyle">
    <!-- Content -->
</div>

I believe styles declared later in the declaration override earlier ones. As long as you ensure your custom styles "shadow" those of the header-div, you can always include the header-div element, and it will only have an effect when any secondary style is absent (or empty).