Class Style Sheet with two names or ?

Question

<div id="SideBar" class="sidebar mainbar">

I've just seen this in a .aspx file. Is this valid? Can someone point me in the right direction to learn what this does. I'm assuming its valid, but I'm not finding it in the css file. I am finding sidebar defined as a class, but not mainbar.

Thanks in advance,

Randy

Answer 1

Yes this is perfectly valid. An element can be styled by multiple classes.

See this reference and this one which touches on which one takes precedence for duplicate style attributes.

Answer 2

This div just has two classes, which means it will get the properties defined under .sidebar as well as those under .mainbar

Answer 3

CSS Tricks has a few other CSS tricks including having two classes.

Copy/Pasting the trick from the above site:

Usually attributes are assigned just one class, but this doesn't mean that that's all you're allowed. In reality, you can assign as many classes as you like!

Using these two classes together (separated by a space, not with a comma) means that the paragraph calls up the rules assigned to both text and side. If any rules overlap between the two classes then the class which is below the other in the CSS document will take precedence.

Answer 4

As for mainbar not showing up in your CSS file, sometimes developers assign classes to elements and then reference those classes in javascript.

Answer 5

Sure, you can have an element implement as many css classes as you like. If there is no class defined in the CSS files it is possible that either:

1. The additional css classes have been removed from the styles sheets and the .aspx pages have not been refactored to match.
2. The css class is been used to identify the element(s) via javascript or some other scripting language.

Answer 6

Beware of IE6 if someday you try to style an element using more than one class, it doesn't work like intended.

• Googling "multiple classes ie6"
• test case

No problem with id+class (like #anid.class ) or two selectors like .classA and then .classB but no .classA.classB