CODEWITHSUNDEEP
css
sawa
sawa

Reputation: 168101

How to control priority of class specification

I have some DOM elements that have classes foo and bar:

<div class="foo bar">...</div>

and I want to control the priority between them. Following the w3c specification on this, I thought that adding extra selectors to the css might make the priority higher. For example, if I wanted foo to override bar, I was thinking of putting a dummy class like this:

.foo, .dummy{
  ...
}

.bar{
  ...
}

Will this work? Is there a better way to do this? I know that !important can control individual attributes, but I want a more general solution that controls the priority of the entire class specification.

Upvotes: 3

Views: 93

Answers (1)

nemo
nemo

Reputation: 1685

if you first add a rule for the .bar class and then for the .foo, .foo rules will overide .bar's

example:

.bar {
    color : red;
}

.foo {
    color: blue;
}

The color of the div will be blue.

What you proposed will work, but you need to add the dummy class to the div (so the css selector will match)

example: 

<div class="foo bar dummy">...</div>

Upvotes: 3

Related Questions