Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS multiple classes property override

Tags:

css

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).

like image 774
iandisme Avatar asked Nov 14 '11 20:11

iandisme


People also ask

How do I override one CSS class with another?

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.

How do you call multiple classes in CSS?

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.


1 Answers

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.

like image 156
steveax Avatar answered Sep 28 '22 18:09

steveax