CODEWITHSUNDEEP
htmlcss
firebolt_ash
firebolt_ash

Reputation: 1324

css styling issue when coming from javascript

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 ?

Upvotes: 0

Views: 33

Answers (2)

rgthree
rgthree

Reputation: 7273

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 */ }.

Upvotes: 1

patrykf
patrykf

Reputation: 449

Use this in your css

.message > p {
    //styles
}

Upvotes: 0

Related Questions