Tonight I learned a life-saving technique that I will forever hold dear to my heart. While reading Ten CSS tricks you may not know, I learned a CSS trick that I, indeed, did not know. Did you know that you can assign multiple classes to one element? Yes, you can, here’s how:

<style type="text/css">
     .red {
          color:red;
     }

     .bold {
          font-weight:bold;
     }
</style>
<p class="red">This is a red div.</p>
<p class="bold"vThis is a bold div.</p>
<p class="red bold">This is both red and bold!</p>

If you try it out yourself, you’ll notice that there are only to styles defined and that both styles are attached to the final paragraph. All you have to do is delimit the class names with a space. Thank you Webcredible!

You can also style on a custom attribute. So, if you have an element like this: ... You can style this li like this: li[tab="account"] { border: 1px solid pink; } If you have multiple elements with the same custom attribute, only with different values, you can style them all like this: li[tab] {border 1px solid red; } I use custom attributes all the time for my javascript, because I know nobody will mess with them. This helps us keep the html required for the javascript separate from the html needed for the styling. But you can use them for both.
Devin Baldwin on 2010-10-04 00:00:41.0