[thelist] CSS: Why does this work?

Richard Livsey richard at livsey.org
Tue Apr 6 10:32:11 CDT 2004


-----BEGIN PGP SIGNED MESSAGE-----
Hash: SHA1

Rob Smith wrote:

| Good morning, afternoon, evening,
|   <div class="test a">
| 	This is a test.
|   </div>
|
|   works the same as...
|
|   <div class="a">
| 	This is a test.
|   </div>

You can have more than one class per element.

For your html above, try the following:

.test
{
~   background-color: #FFC;
~   border: 1px solid #f00;
}

.a
{
~   background-color: #CCC;
}

This should give your div both classes (gray bg, red border).
Note that the order they are applied is by the order they appear in the
stylesheet, not in the class attribute.

So:

'class="a test"' is the same as 'class="test a"'

However if you swapped the order the rules are defined above, then you
would get a different effect (yellow bg, gray border).

See the following for more info:
http://css-discuss.incutio.com/?page=MultipleClasses

hth

- --
R.Livsey
Incutio Web Developer
www.livsey.org
www.incutio.com
-----BEGIN PGP SIGNATURE-----
Version: GnuPG v1.2.3 (MingW32)
Comment: Using GnuPG with Thunderbird - http://enigmail.mozdev.org

iD8DBQFAcs17SIUmK+OkzDERAqWmAKCctYJ7vG3cnHNBIl8gkd+Qhsj35ACg9kzD
I3xDB1V4yeB9vCguUAf8+kA=
=2mQZ
-----END PGP SIGNATURE-----


More information about the thelist mailing list