Remove all CSS from specific DIV

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>

You can use JavaScript to automagically add classes to existing elements. If interested let me know and I'll give a rough example. — Shadow The GPT Wizard, Nov 04 '12 at 14:41

score 3 · Answer 1 · answered Nov 04 '12 at 14:41

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.

score 1 · Answer 2 · answered Nov 04 '12 at 14:36

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.

score 1 · Answer 3 · answered Nov 04 '12 at 14:39

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.

score 0 · Answer 4 · answered Nov 04 '12 at 14:37

0

As I commented, What's wrong with using classes, IDs, and pseudo-selectors?

For example, this works just fine:

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

As does

.first {background-color: #000; width: 550px;}

<p class="first">Some styled text</p>
<p>Some default text</p>

answered Nov 04 '12 at 14:37

Jezen Thomas

13,619
6
53
91

Case specific though, only works in the case where you only want the first p styled. Your first two comments are obviously the better solutions, classes or ID's and even ID's are only good for a single instance if you're using them correctly. – Rick Calder Nov 04 '12 at 14:40

Remove all CSS from specific DIV

4 Answers4

HTML

CSS