CODEWITHSUNDEEP
htmlcss
Pratip Ghosh
Pratip Ghosh

Reputation: 1888

Show an html string in page

I know this has been asked before here. But let me put my problem in a different way. I am using PHP and would like to show a HTML string coming from database in my page. But the problem is as the CSS of the page is of a generic style, it's taking the them in the HTML string also. But I want it to show without any styling whatsoever. I have gone through some searching the internet only to find about the "not" selector of CSS. I would like to know whether there is a way to identify a single element in my html page that would “not” take the general styling/css? What “not” does is specify all other element and “not” the one in the argument. I just want the opposite.

<style>
.div-class p{font-weight: bold;}
.div-class p:not(.no-style){font-weight: normal;}
</style>

<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold.</p>
</div>

I would like the “p” with the “no-style” class to have a normal font weight. It’s currently the opposite. I hope to have made myself clear.

Thanks,

Upvotes: 0

Views: 336

Answers (3)

Vignesh Subramanian
Vignesh Subramanian

Reputation: 7289

there is a simple way to override the styles applied you can use !important

for example

p{
font-weight:bold;
}

will not be applied if u have 

.nostyle
{
font-weight:normal !important;
}

JSfiddle

Upvotes: 0

Sergiy T.
Sergiy T.

Reputation: 1453

You may place your script output in div with certain id/class. And reset css to this div. There are a lot of various css resets available.

P.S. IMHO there is no css rule to disable all css for certain elements.

P.P.S. You may create an empty iframe (src="about:blank") and place your content there with javascript.

Upvotes: 1

ojovirtual
ojovirtual

Reputation: 3362

<style>
.div-class p
{
font-weight: bold;
}
.div-class p.no-style
{
font-weight: normal;
}
</style>

<div class="div-class">
<p>This should be bold.</p>
<p class="no-style">This should not be bold.    </p>
</div>

Edit: see it working: http://jsfiddle.net/C3jqc/

Edit 2: you can't avoid heritage. You could use "not" in your CSS in this way:

<style>
p:not(.unstyled){
font-weight : bold;
}
</style>


<p> this should be Bold</p>
<p class='unstyled'> This shouldn't be bold</p>

Then add the "unstyled" class to every content you create from your PHP and the ":not(.styled)" to every CSS declaration.

Another option is to redefine every style in your CSS to match my original response.

Bear in mind the availability of the "not" selector across browsers.

Upvotes: 1

Related Questions