CODEWITHSUNDEEP
css
iandisme
iandisme

Reputation: 6396

CSS multiple classes property override

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

Upvotes: 42

Views: 51270

Answers (5)

S Panfilov
S Panfilov

Reputation: 17551

In case of a conflict, the css tag that comes after has a priority.

In other words - if you want some class to ever override others - just put it on end of your css file.

P.S. But don't forget that more specific rules has more priority, like .a.b {} is more powerful than just .a{}

Upvotes: 4

steveax
steveax

Reputation: 17753

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.

Upvotes: 42

streetlogics
streetlogics

Reputation: 4730

Just wanted to throw out another option in addition to !important as well as style definition order: you can chain the two together as well:

.myclass.myclass-right{float:right;}
.myclass{float:left;}

Upvotes: 17

Leo
Leo

Reputation: 5286

As long as myclass-right is declared after your other class in your css file, it will work.

Upvotes: 7

John Hartsock
John Hartsock

Reputation: 86872

Using !important is one way to do it.

.myclass-right{
    float:right !important;
}

In addition if you are more specific with your selector it should override as well

div.myclass-right{
    float:right;
}

Upvotes: 16

Related Questions