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:
I have a screen.css file that includes the line:
and I want to create a series of demo css files that would contain this:
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!
Code:
<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:
Code:
#demo {display:none;}
and I want to create a series of demo css files that would contain this:
Code:
@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!