Using multiple classes within selectors
The other day I had to style a menu that looked like this:
While styling the menu, I came across an interesting problem. The Content management system was writing two classes into the same element, and there were times when I needed to use both of these classes for styling.
I had to take two classes like this:
<li class="page-1 current-page"><a href="#">Home</a></li>
And write a multiple class selector like this:
.page-1.current-page { }
Is this allowable? Is it supported? Particularly, how do Internet Explorer 5, 6 and 7 deal with multiple classes.
If interested, read Multiple classes within selectors where I outline how these selectors can be used and the issues involved. The article also includes a step-by-step tutorial on how to style the list shown above.
November 5th, 2007
8:32 am
Permalink
Which CMS are you using Russ?
November 5th, 2007
8:42 am
Permalink
[…] Shigeru-Nakagaki.com wrote an interesting post today onHere’s a quick excerptThe other day I had to style a menu that looked like this:. While styling the menu, I came across an interesting problem. The Content management system was writing two classes into the same element, and there were times when I needed to … […]
November 5th, 2007
8:42 am
Permalink
@Matt Robin: the CMS was WordPress, and the PHP could have been rewritten if needed. However, I wanted to see if it was possible using existing markup as an exercise. I was also curious to see if IE7 supported multiple class selectors.
November 6th, 2007
12:30 am
Permalink
This is definitely supported (from what I have seen). There isn’t a special declaration you are using, you are just using the cascade to style elements differently.
And, Wordpress is far from a CMS. It is a blogging tool shoehorned into a CMS
he.
November 6th, 2007
4:56 am
Permalink
Multiple classes are definitely supported. FireFox and IE 6.0+ support it. As a matter of fact it can give you great control.
http://www.w3.org/TR/css3-selectors/
November 6th, 2007
6:25 am
Permalink
Multiple classes are an amazing way to create reusable css classes.
Especially if you are using class selectors with Javascript to hide/show elements. You can just add the class along with other classes you are using.
I use it alot when creating menus. I have a class for the current page state, and a class I use for the last item on the menu. And sometimes I have to use those classes in conjunction with other classes, and I’ve never ran into any problems with IE.
So, I say enjoy the realization and joy of more control!!!!
November 12th, 2007
11:23 pm
Permalink
Nice tutorial, thanks.