Using Multiple Class Names to Organize and Style Html Elements

Multiple classnames can be used to give an HTML element a more generic style in addition to a more specific one in order to make styling easier and more logical.

To organize your classnames, go from generic to more specific (just a nice way to organize classes, has no effect on how classes are applied). You must separate multiple classnames with spaces (don’t use commas).


<div class="column main-column">
     some content

You could use this to apply general styles to all your “column” elements in addition to extra more specific styles for just your “main-column” elements. (If you are sure that the element will be unique then you can just use an id in addition to the generic classname rather than giving it multiple class names.)

NOTE: The order of the class names in the HTML has no effect on how they are applied. In the case of two conflicting style rules in your stylesheet, the last style listed in your CSS will be applied following normal cascading rules.

Identifying and Styling Form Elements:

You could use multiple class names to identify all text elements as well as all text elements intended to be used to input URLs in a form. (The “text” classname is mainly for the benefit of Internet Explorer 6 which doesn’t understand CSS attribute selectors.)

<input type="type" style="text url-input">

IE6 Bug Caution

Most browsers support combining multiple CSS classes to select an element in your style sheet.


<div class="bottom pager pager-bottom"></div>

In browsers other than IE6 you could select this div with the following CSS:

.bottom.pager {margin-top: 15px;}

This doesn’t work in IE6 so you must add an extra more specific class name such as “pager-bottom” in order to select it. (Or select it in an alternate way such as by its container if applicable.)


Clickable HTML Link Over Embed in IE6

Have you ever needed to make an embed into a link (such as linking a small preview video to the full video)? An unfortunate bug seems to make this impossible in IE6. After searching for a solution online and failing to find anything I did some more experimenting on my own and finally discovered a simple solution. Just add a transparent GIF background image to your link and suddenly it will become clickable in IE6.

Example HTML:

<a href="video.html" class="video-thumb-link"></a>

Example CSS:

.video-link {background: url(transparent.gif);}

%d bloggers like this: