Multiple Classes

From CSS Discuss

Jump to: navigation, search

It is possible to specify more than one class for an element, like this:

<h1 class="bordered widespaced">Spaced out header</h1>
<p class="bordered">
  In this case, the stuff in the header would be bordered with a dashed style, 
and have text spaced widely, while the paragraph is bordered with a solid style.
</p>
...
<style type="text/css">
.bordered { border: 1px solid #800; }
.widespaced { letter-spacing: 4em; }
.bordered.widespaced { border-style: dashed}
</style>

Contents

Support

Support is generally good in modern browsers, although with caveats for Internet Explorer , as noted below.

References:

  1. Css Discuss List thread: http://archivist.incutio.com/viewlist/css-discuss/?id=4184
  2. A test case: http://www.meyerweb.com/eric/css/tests/multiclass.html
  3. Also see multiple classes in: CSS3 support selectors

Multiple class

In html: class="foo bar" In css: .foo{} or .bar{} The HTML element with both classes should have rules from both selectors applied.

Works on:

Problems with:

Multiple selector

In html: class="foo bar" In css: .foo.bar{} or .bar.foo{} The selector for both classes should only apply to elements with both classes, order is unimportant.

works on:

Problems on:

  • Internet Explorer (Win/6, Mac/5.x): broken. The multiple selector will select every element with the last class in the selector (order in the selector is important, order of the classes in the HTML is not), regardless of the presence of the other classes. In other words, IE treats .one.two.three exactly as it does .three. (See hack below.)

Mac IE 5 has a problem parsing classes with whitespace: see http://www.macedition.com/cb/ie5macbugs/#whitespace and http://www.macedition.com/cb/ie5macbugs/substringbug.html

It's possible to use this as a hack:

<style>
.foo { /* Properties for everything */ }
.ie-only.foo { /* Only IE will apply these */ }
</style>
...
<div class="foo"></div>

This hack is not widely known; it was described to the Css Discuss List by John Magnus on 21 February 2005.

Test code

<style>
div { margin:10px; }
.foo { background: yellow; }
.bar { border: solid 4px red; }
.foo.bar { border-style: dashed; }
</style>
...

<div class="foo">foo!</div>
<div class="bar">bar!</div>
<div class="foo bar">foo bar!</div>

Cascade

What's the expected behavior when an element has multiple classes which redefine properties? Here's an example:


<style type="text/css">
.headline { border: 3px solid red }
.newsitem { border: 2px solid red }
.blurb    { border: 1px solid red }
</style>
...
<h1 class="headline newsitem blurb">French Noblewoman Advocates Increased Cake Consumption Among Peasants</h1>

Will the border of the H1 element be 3, 2, or 1 pixel wide?

To answer this question you need to understand how Selector Specificity works in CSS. In this case the (rough) answer is the "last highest-weighted rule wins", so the border will be 1px. Note that it's the order of the rules in the stylesheet that controls which takes precedence; the order of the class names in the class attribute is irrelevant.


Personal tools