Question

I am using this div:

<div id="container" class="large">

In my CSS the ID is assigned a default height like this:

#container {height: 500px}

In this one case I’d like the div to be larger, but this would overwrite the class.

.large{height: 560px}

I don’t what to make a class small and a class large…
How can I do this ?
Append to the class and only effecting this div to make it bigger !

Answer 1

Just combine the selectors:

#container.large { height : 560px; };

This increases the specificity of the selector, since there’s an id and a class, without creating future problems using !important.

To explain specificity for CSS, it’s worth reading these articles:

• CSS Specificity: Things you Should Know.
• Molly Holzschlag’s ‘CSS 2.1 Specificty Clarified’.
• CSS Specificty Calculator, from suzyit.com.