I am starting up a brand new web project and would like to know if I can safely use multiple CSS classes nowadays.
<div class="float-left bold bordered"></div>
Do most common browsers support this, or will a significant percentage of my visitors run into major trouble viewing the page?
I'm not worried about special cases like Netscape 1.0 users, but browsers and versions usually used in companies these days.
HTML elements can be assigned multiple classes by listing the classes in the class attribute, with a blank space to separate them. If the same property is declared in both rules, the conflict is resolved first through specificity, then according to the order of the CSS declarations.
Attribute ValuesTo specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows you to combine several CSS classes for one HTML element.
There is no limit to how many class names you can add to a single HTML element. But keep in mind that you need to keep the class names intuitive and descriptive. I'd recommend you put 10 class names at maximum in a single HTML element to keep your project maintainable.
Multiple ClassesHTML elements can belong to more than one class. To define multiple classes, separate the class names with a space, e.g. <div class="city main">. The element will be styled according to all the classes specified.
Nearly any modern browser should support this, it is apparently buggy in IE <= 6, but you should be fine as this lack of functionality would hinder many major sites / applications.
The following link has a chart showing support for multiple CSS classes by browser:
CSS Support By Browser
Netscape 1.0 will probably not support this, as Netscape lacked support for it in 4.0. Source
Netscape 4.0+
- Multiple class names for an element are not supported.
Yes, every major browser supports this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With