Multiple classes setting the same CSS property

Hi,

I have a SPAN that i am styling to align text in the center of a div. The style looks like this:

span.message
{
   display: block;
   text-align: center;
}

My problem is that i have an invisible class that sets elements display property to none.  I use this quite often to show/hide elements.  But if i apply both classes to the span: ie,

.invisible { display: none; }
<span class="message invisible"></span>

..then the message class's display is overriding the invisible classes, so the span's display is set to block instead of none.

How can i get this to work, and what is rules does CSS use to choose which rules gets applied?

Kind regards,
Michael
LVL 1
Xavior2K3Asked:
Who is Participating?
 
KennyTMCommented:
Try this:

.invisible {
display: none!important;
}
0
 
StormyWatersCommented:
It's because span.message has a higher specificity than just .invisible.

If you make it:

span.invisible {
}

.message {
}

It should work the way you want.

KennyTM's will work, because !important supercedes all specificity.

0
 
noamattdCommented:
Given two classes with the same priority, the one defined later in the file is the one that will be used.  

Stormy's way is better, because if you need to override an !important rule, you need to define the overriding rule with !important AND have it appear later in the file, which gets messy.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Xavior2K3Author Commented:
Ok, so if i had

span.invisible {
}

and..

span.message {
}

... then span.message would override span.invisible because it appears after?
0
 
StormyWatersCommented:
Yes.
0
 
Xavior2K3Author Commented:
Ok thank you all for your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.