AboutAndrew Hoffman Expertise I can field just about any question within this topic ranging from JavaScript to CSS, the two ingredients of DHTML. I`m very interested in the W3C and its validation rules for HTML, XHTML, and CSS, and enjoy answering questions of this type as well. I detest sleep and respond at all hours of the day or night.
Experience Experience in the area I've been working with DHTML and CSS for 7 years now and build/maintain websites of my own that implement DHTML navigation.
What I'm doing now My contract with Microsoft has ended and I am working for myself once again. Please contact me for any front-end work at antibland@gmail.com
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.
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."
