- Universal Selector
- !Important or Not?
- Multiple Classes
- Mysteries Revealed
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Multiple Classes
Multiple classes is the technique of applying two or more classes for a single element. The class values are placed in the (X)HTML and are space-separated values:
<div class="module widget"> </div>
The classed element will then interpret all classes:
.module
{width: 200px; border: 1px dashed #000; padding: 10px;} .widget {font: 12px Arial,
Helvetica, sans-serif; color: #333;} Figure 4 shows the results.
)
Figure
4 Applying multiple classes to an element.
Multi-classes are useful in a range of situations. One situation in particular is portal sites, in which common modules that can have a number of style sets applied to them are in use. This way, you can have a class for the module and then add classes as needed to address styles for that module. You can also use them, as with the universal selector and !important keywords, for diagnostic purposes when working on styling complex documents.
Of course, just as the overuse of classes themselves is not recommended, the overuse of multi-classes is to be avoided. The humorous term "classitis" refers to the overuse of classes in general—ideally, you're tapping into inheritance, the cascade, and descendant selectors to remove as much from the markup and into the CSS as possible.