How To Prevent Child Element From Inheriting Css Styles

I have a

element with a

element inside:

This is my Parent Div.

This is my Child Paragraph.<

Solution 1:

In your case the best way is to just over right the styles that the <p> element is inheriting:

So in your CSS file, which you should be using instead of inline styles:

.parent-div {
    font-size: 10pt;
    color: red;
}

.child-paragraph {
    font-size: 12pt;
    color: black;
}

Solution 2:

In your child node -

<pstyle="font-size:12pt; color:black;">This is my child</p>

Just set the inline style to whatever you want.

Solution 3:

You can use the > selector in CSS to select the immediate child p of div.

Fiddle link

div > p {
    font-size:1.2 em;
    color: green;
}

Share