Combining class and ids together

I’ve seen people put both a class and an id together and wonder what is the purpose to that?


<div id="idname" class="classname"></div>

Well one reason is to reduce the amount of unique selectors in your css.

For example the classname in your example could be setting the width or setting a BG image etc.

If he ID is void of either of those properties in the css then the class could define them.

It is usually when you get into larger sites with 50 plus pages that combined selectors like that can be helpful.

Classes are for code which can be repeated and reused, ID’s are for code unique to that element alone, therefore it makes sense that an element can share commonly used code and have code unique onto itself (hence using both together), rather simple when you think about it. :slight_smile:

You might have say 10 ids in the same page where the ids are used either by HTML or JavaScript. Those 10 might all need to use the same CSS and so you might use a class for that rather than listing all the ids (since you might use the same styles for multiple pages that have differing numbers of ids).

Set it up to work for 10 ids and if your next page needs that style applied to 50 of them then you need to change the CSS just for one page to work. Using a class means it will work regardless.

I do this a lot. On top of that i use multiple classes. When you think about it logical use rather than “doctrine” it becomes clear.

a class is a set of common attributes.
an ID is … well an ID… a unique identifier.

in that line of reasoning it becomes clear that you can code the ID with ONLY the rules specific to that specific element. and use classess for shared rules.
An additional benefit is ease of AJAX implementation. For the sake of example , let say you have a unique element on a page that you want to change color when someone checks a box in form on the page. if you had coded the color into the ID , you would need to use Javascript to change the .style of the element. if you change your mind about the look, or need the style to be different you would have to go back into the JS and code it again. On the other hand, if you had used an ID and classes, you could simply use JS to toggle the class to you content. If you needed it to be different on another page you alter the CLASS and not the JS. In short this aids separation of style and behaviour, which is just as important as separating style from content.

there are MANY more reasons, but they generally follow that same logic.

ID’s also have additional benefits in anchor fragments, you can use them within any tag to indicate a scrolling position where a link (like #gohere) matches the ID value. Therefore people may include both a class and ID to give shared visual style but a constructive and useful anchor fragment link to allow inter page scrolling. :slight_smile:

PS: In your example, it would be much better to use the :checked pseudo in CSS3 rather than use scripting to change the background :wink: