I have an application where some text is coming after message getting parsed like this :
<div class='message'>
<p ng-bind-html="main.parseMsg(msg)"></p>
</div>
I have written some css for the .message p {}.
My parseMsg sometimes returns something like this
<div class='something'><p>...</p>
I want the something class to not inherit css properties from .message p{} at all.
Any solution ?
There are a couple CSS ways to fix your hierarchy (like adding a class to your binding p, etc.) but there's another issue: You cannot have a p inside of a p.
This nested p markup:
<div>
<p>1<p>2</p></p>
</div>
Actually turns into three p's as direct children of the div as the browser renders it to make it valid markup:
<div>
<p>1</p>
<p>2</p>
<p></p>
</div>
So, to better answer your question and fix your "paragraph-problem" you will want to change your p that is bound to be an element that is allowed to contain multiple p's. Here, we'll use a div:
// Template:
<div class="message">
<div ng-bind-html="main.parseMsg(msg)"></div>
</div>
// CSS:
.message > div { /* Your child container element */ }.
Use this in your css
.message > p {
//styles
}
