Remove all CSS from a specific DIV

Question

Possible duplicate:
Disinherit (reset) CSS style for a specific element?

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

Is it possible to create an element on the same page, and especially for this element not to load any of css?

For instance:

<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 says, there are usually better ways to isolate an element. However, there is also a CSS selector for this purpose.

See Negative 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 extreme cases that are difficult to match with another selector.

Answer 2

This will be exactly the class for which the classes were developed.

 <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, do not use names similar to class 1, intended for demonstration only. Use descriptive names for classes that make sense.

Answer 3

You can positively isolate your desired P style:

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

Or you can override the ones you want to keep unchanged:

 <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 more difficult to maintain.

Answer 4

As I noticed, what is wrong with using classes, identifiers and pseudo selectors?

For example, this works just fine:

 p:first-child { background-color:#000000; width:550px; } 

Like

 .first {background-color: #000; width: 550px;} <p class="first">Some styled text</p> <p>Some default text</p>