Using ID and class at the same time

[PapaGeek]

I’m trying to use both ID and class to control when demo items appear and disappear on the screen, but having no luck. My html file looks like this:

<p>Insert Content Here</p>
<div ID=demo>
  <p class=test1>Insert Content 1 Here</p>
  <p class=test2>Insert Content 2 Here</p>
  <p class=test3>Insert Content 3 Here</p>
</div>

I have a screen.css file that includes the line:

#demo {display:none;}

and I want to create a series of demo css files that would contain this:

@import url('screen.css');
#demo.test1 {display:inline;}

My thought was that the #demo.test1 would be more specific and therefore override the display none from the screen file so that just that one demo line would display, but none of the test lines are displaying.

Any ideas?

MY fallback is to put individual display none's for for every test except the one I want to display in each and every css file. That woulde make it tough when I add another test, say test 44! Test 2 adn 3 would be easy!

 

[GeneticOpera]

I'm a little confused. You can use a div and put classes and other divs inside, such as when you use a wrapper, but you usually do this by using #test for your div and .test for your classes. I'm just getting stuck on what you're trying to do since if you set something to have no decoration within the DIV, why then change each class to have a decoration instead of just getting rid of the DIV?

 

[PapaGeek]

I want to create a page that demonstrates about 6 different styles of how to accomplish a task. I wanted everything to be on one page with all 6 explanations and reveal them one at a time based on different css files. One way to do this is to have 5 display none’s in each css file to hide the ones that I don’t want to display. The problem with this approach is that I have to update each css file when I demonstrate another style.
I wanted to use SSI to build each page from the same source include file, and then use different css files to hide the unwanted material.
My original though was to look for a way of hiding every style, then override and unhide the one I wanted.

 

[PixelPusher]

Ok, my comments:

1. I would correct the code so its semantically correct. (use lowercase attribute names and wrap the values in quotes)
2. If you set the parent to display:none, the children will be hidden also, no matter what.
3. Adjust your CSS so that you set all children to display:none and then override accordingly
4. Only use paragraph tags if your using text. If you are going to do more complex layouts with each child I would use divs

HTML

<div id="demo">
  <p class="first">Text...</p>
  <p class="second">Text...</p>
  <p class="third">Text...</p>
OR...
  <div class="first">Complex...</div>
  <div class="second">Complex...</div>
  <div class="third">Complex...</div>
</div>

CSS

div#demo {
STYLES FOR DIV CONTAINER IF NEEDED
}
div#demo p {
display:none;
}
div#demo p.first {
display:block;
}