If I have a style class defined as such:
.myclass{ //bunch of other stuff float:left; }
and I define another class like this:
.myclass-right{ float:right; }
and I define a div this way:
<div class="myclass myclass-right"></div>
Will that div inherit everything from myclass, but override the float property to float:right? That's what I'd expect to happen. Also kind of want to know if that has any cross-browser implications (good browsers vs. IE 7 or greater, f*** IE6).
To override the CSS properties of a class using another class, we can use the ! important directive. In CSS, ! important means “this is important”, and the property:value pair that has this directive is always applied even if the other element has higher specificity.
To 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.
As long as the selectors have the same specificity (in this case they do) and .myclass-right
style block is defined after .myclass
, yes.
Edit to expand: the order the classes appear in the html element has no effect, the only thing that matters is the specificity of the selector and the order in which the selectors appear in the style sheet.
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