?
Solved

Multiple classes setting the same CSS property

Posted on 2006-04-15
6
Medium Priority
?
550 Views
Last Modified: 2008-02-01
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
0
Comment
Question by:Xavior2K3
6 Comments
 
LVL 8

Accepted Solution

by:
KennyTM earned 260 total points
ID: 16460667
Try this:

.invisible {
display: none!important;
}
0
 
LVL 13

Assisted Solution

by:StormyWaters
StormyWaters earned 240 total points
ID: 16460718
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
 
LVL 4

Expert Comment

by:noamattd
ID: 16461271
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 1

Author Comment

by:Xavior2K3
ID: 16464359
Ok, so if i had

span.invisible {
}

and..

span.message {
}

... then span.message would override span.invisible because it appears after?
0
 
LVL 13

Expert Comment

by:StormyWaters
ID: 16464424
Yes.
0
 
LVL 1

Author Comment

by:Xavior2K3
ID: 16476081
Ok thank you all for your help!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question