Huwha? Using multiple CSS classes?

Wednesday, February 4, 2004 12:56 PM Filed under:

General

Huwha? Using multiple CSS classes?

Well holy crappolie. Andy Smith posted a real nugget of info related to CSS classes that I had no idea about. Maybe everyone else knows about this - but it sure was news to me. You can put multiple CSS class names inside the same class attribute separated by a space. Who knew?! Take a look.

.foo
{
    border: 1px solid black;
}

.bar
{
    background: red;
    color: green;
}

<span class="foo bar"></span>

I suppose that says a lot for actually taking the time to read the spec.

Comments

Eularia 5/19/2005 12:22 PM

Hi!
This is exactly what I was looking for. I really wanted to get rid of any repeated styles. In my newbie-ness, I was trying to implement classes much like in C++ and Java -- child inherits from parent and has own properties and such. Your posting helped me figure it out. Thanks!

*********
This was the only way I could get both Netscape and IE to display a border along the whole length of a div instead of exactly where the content ends.

<div class="envelope, borderCol">
<div.....>
<img src ....>
</div>
</div>

.envelope{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}

[... not sure if this needs this like id selector did (for netscape fix). Would you know?
body>#envelope{width: auto; height: auto;}
]

.borderCol{
border-right-style: groove;
border-right-color: #AFBAC6;
border-right-width: large;
}