Parent effect Child style in a generic selector using css
I have the following markup:
<div id="content">
<div id="contact">
<p>Testing p selector in child</p>
</div>
</div>
And these two css files:
default.css [Parent]
#content p {
color: #000000;
font-size: 14px;
font-family: helvetica;
text-align: left;
}
form.css [Child]
#contact p {
background-color: #F2F7FB;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: #3670A7;
text-align: left;
margin-right: 0px;
padding-right: 0px;
}
Why:
<p>Testing p selector in child</p>
gets the parent style and not the child?
+3
source to share
2 answers
This is probably the order in which your external .css files are loaded, but you can ensure that your style cascades are applied however you wish, regardless of that order, by using the "direct child" selector in your cascades.
Using #contact > p
and #content > p
will indicate that when p
a direct child of a container with an ID, it will use that style.
0
source to share