You are here:

DHTML/Union/Intersections of styles

Advertisement

Expert: Andrew Hoffman - 2/29/2008


Question
QUESTION: Hi Andrew!
I have a question related to CSS which I'm not sure is valid or not :-). So I guess I will hit the question directly and leave it for you to decide whether I'm on the right track or not.
I have a few tags in my html document with multiple (whitespace separated) values for the class attribute. [I read somewhere on the w3c that the class can have multiple values.] Then I created 3 style elements in the "head".
1) All tags should have display: none
2) Tags with class "class1" should have display: block
3) Tags with class "class2" should have display: block
The problem here is that the browser is displaying a union of both style elements (as per my css, this is valid). What I want it to show is an intersection, meaning, I want the browser to show all tags with class having "class1" and "class2" and hide all others.

How do I make it display only an intersection of the last 2 styles instead of a union ?
Please let me know if I'm unclear on what I wish to ask or if I need to upload an example somewhere and provide a link to it.

Thanks in advance,
Parag P. Doke
http://paragpdoke.blogspot.com

ANSWER: Parag,

Would you be able to upload a sample page for me to look at?  This way, I could tinker in a more efficient way.  However, I would try this first (maybe we'll get lucky).  Add this to the end of your styles.

.class1, class2 {
 display: block !important;
}

- Andrew

---------- FOLLOW-UP ----------

QUESTION: My God!I never happened to notice that you replied to my question till today.I'm so sorry for such a delayed response.I'll post the sample html code right away.
-----BOF-----
<html>
<head>
   <title>CSS sample</title>
   <style>
       div {
         display:none;
       }
       .class1 {
         display:block;
       }
       .class2 {
         display:block;
       }
   </style>
</head>
<body>
   <div>I'm a div with no class attribute. I should not be seen.</div>
   <div class="class1">I'm a div with class1. Though I have the attribute, I don't have both. I should not be seen.</div>
   <div class="class1 class2">I'm a div with both attributes. I should be visible.</div>
   <div class="class2">I'm a div only with class2. I should not be seen.</div>
</body>
</html>
-----EOF-----
As you can see, the browser is showing 3 div tags whereas I want it to show only 1.
Thanks in advance for your help and sincere apologies for a late response,
Parag P. Doke
http://paragpdoke.blogspot.com

Answer
This may be a way to simplify your stylesheet while still getting what you want:

div {
display: none;
}

div.class1.class2 {
display:block;
}

Simpler, huh? The first says "give all divs no display."  The final rule overrides part of the first rule: "When I encounter only divs containing both class1 and class2, display the div."

- Andrew

DHTML

All Answers

Answers by Expert:

Ask Experts

Volunteer

Andrew Hoffman

Expertise

Ask me about JavaScript, CSS, HTML5/XHTML, or PHP. Chances are I'll be able to help you. I know the economy is in the tank, but if you like my answer, please consider donating a few bucks. It's like tipping your barista, if your barista served fresh code instead of coffee.

Experience

I started doing this when boy bands were still cool.

Education/Credentials
I read a lot of nerdy books to get here.

©2012 About.com, a part of The New York Times Company. All rights reserved.