Remove all CSS from specific DIV [duplicate]

Question

Possible Duplicate:
Disinherit (reset) the CSS style of a specific element?

I have a page that loads an external CSS file with different CSS attributes.

Is it possible to create an element within that same page and specifically for that element not load any of the css?

For example:

<style type="text/css">
p {
    background-color:#000000;
    width:550px;
}
</style>
<p>This should get the P styling from the style tag</p>
<p>This should NOT get the P styling</p>

Answer 1

As everyone else is saying, there are usually better ways to isolate an element. However, there is a CSS selector for this purpose too.

See The Negation Pseudo-Class

HTML

<p>A paragraph</p>
<p class="nostyle">Don't style me</p>
<p>A paragraph</p>
<p>A paragraph</p>

CSS

P:not(.nostyle) { color: red; }

Example: http://jsfiddle.net/LMDLE/

This is rarely the right solution, but it can be useful for handling edge cases which are hard to match with another selector.

Answer 2

This would be exactly what classes were designed for.

<style type="text/css">
.class1{
background-color:#000000;
width:550px;
}
</style>
<p class="class1">This should get the P styling from the style tag</p>
<p>This should NOT get the P styling</p>

For the record don't use names like class1 that was for demonstration only. Use descriptive names for classes that make sense.

Answer 3

You could positively isolate the P's you want styled:

<p class="hasStyle"></p
<p></p>

Or you could override the ones you want to remain unstyled:

<style>
p {
    background-color:#000000;
    width:550px;
}

.noStyle {
 background-color: none;
 width: none /* or whatever you want here */;
}
</style>

<p>has a style</p>
<p class="noStyle"></p>

The latter is harder to maintain.