CODEWITHSUNDEEP
css
JoeTidee
JoeTidee

Reputation: 26054

CSS class precedence

I have two classes, one is used specifically fro certain tags, the other can be used on any tag:

a.action_link_2 {
    display:inline-block;
}

.display_none {
    display:none;
}

In some circumstances I want to apply both these styles and have tried this:

<a class="action_link display_none">content</a>

However, when rendered in the browser, the 'action_link' class take precedence. I understand that this might be to do with CSS class priority, i.e. tag-specific classes taking precedence. My question is how do I make this tag hidden using these classes and still allow the 'display_none' class to be used on any element to hide it?

Upvotes: 2

Views: 229

Answers (3)

Aaron
Aaron

Reputation: 10440

you could just remove the a from before the class, and also add body before the display none class to give it a higher priority.

.action_link_2 {
    display:inline-block;
}

body .display_none {
    display:none;
}

Upvotes: 3

Naeem Shaikh
Naeem Shaikh

Reputation: 15715

You are right, it because specificity read this

To overcome the problem, you need to increase the specificity for .display_none class when it is present on action_link_2 .

Just add one more rule, just below all of it

a.display_none {
        display:none;
    }

This will work , but there will be a problem when you try to add class .display_none to an anchor, but there is no .action_link_2 class present.

So the final and best solution would be to use:

.action_link_2.display_none {
    display:none;
}

Upvotes: 2

JBA
JBA

Reputation: 2899

You could try this:

.display_none { display:none !important; }

Upvotes: 1

Related Questions