I have the following, simplified, code:
<div id="content">
<p>text</p>
<div id="container">
<div id="col1">
<p>text</p>
</div>
<div id="col2">
<p>text</p>
</div>
</div>
<p>text</p>
</div>
</div>
Whenever I set some values to the #content p
element in the CSS file, the changes also apply to the #col1 p
and #col2 p
.
What I would like to do is select only the children p
elements of the #content
div and not select the grandchildren p
elements.
I imagine that one way of doing it would be to add a class to the first children and then apply properties throught it.
Is there any better way of doing it in either CSS2 or CSS3?