Forum Moderators: not2easy
<html><head>
<style type="text/css">
p.a {color: blue}
.a {color: red}
#b p {color: blue}
#b {color: red}
</style>
</head><body>
<span class='a'>
i want this to be red - it's red<br>
<p>i want this to be blue - but the browser renders this red</p>
</span>
<div id='b'>
i want this to be red - it's red<br>
<p>i want this to be blue - it's blue</p>
</div>
</body></html>
Why does it work with class and not with ID? Is there a way to do this?
[edited by: DanA at 10:53 am (utc) on July 18, 2007]
.a p [
color: blue;
]
Edit: Dan beat me,and he's right, too. Use div instead of span. But you also need to fix the selector syntax.
CSS file:
p.first { background-color: gray; }
html:
<p class="first">This is the p.first paragraph</p>
So, is that wrong? if it isn't, why is my case different?
The other way "p.a" means "apply this style to all paragraphs with the class a" -- for that you would do <p class="a">
<div class="a">
<p></p>
<p></p>
<p></p>
</div>
<p class="a"></p>
<p class="a"></p>
<p class="a"></p>
Because you're not applying the class directly to the p -- you're applying it to the containing element (div or span in this case). The ".a p" syntax means "apply this style to all paragraphs that are contained within an element with the class a"The other way "p.a" means "apply this style to all paragraphs with the class a" -- for that you would do <p class="a">
There are also ways to specify only direct descendents or siblings, but those aren't supported by all browsers (cough cough IE cough cough).
