reset multiple css styles for one single div element

Question

my question is if it is possible to reset css styles (a lot off them) for a single div and all elements that are contained in that div.

I am asking, because I found this tutorial for a jquery shoutbox that has it's own css file. I can not just copy the styles over to my own css file, because it will screw up the rest off the page where the styles are already set.

I thought off using a divwrapper and apply all those resets only to that one. I am just not sure if it's possible

I only know this way

#divwrapper td{ set styles }

@CHARSET "UTF-8";
/******* GENERAL RESET *******/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
border:0pt none;
font-family:inherit;
font-size: 100%;
font-style:inherit;
font-weight:inherit;
margin:0pt;
padding:0pt;
vertical-align:baseline;
}

thanks, Richard

possible duplicate of [Reset/remove CSS styles for element only](http://stackoverflow.com/questions/15901030/reset-remove-css-styles-for-element-only) — T.Todua, Feb 28 '14 at 13:01

score 12 · Answer 1 · edited Jul 03 '14 at 20:47

12

Try this:

div.foo, div.foo *
{
    // your styles
}

which will apply the styles to the div with class "foo" and all its descendants. The star (*) is known as the universal selector, and not surprisingly, selects elements of any type.

Or for just the immediate children:

div.foo, div.foo > *
{
    // your styles
}

edited Jul 03 '14 at 20:47

Kalpesh

5,635
2
23
39

answered Jun 10 '09 at 11:22

Noldorin

144,213
56
264
302

I believe he's selecting all descendants [or children] plus the contents of the div – tschaible Jun 10 '09 at 11:32
oh, the comma separates the selectors, got it. I will try that – Jun 10 '09 at 11:33
1

the space after the comma matters – SpliFF Jun 10 '09 at 11:58
1

Yeah, the space is necessary. Note that the first example (that selects all descendants) is supported in all browers, while the second (that just selects children) is supported in all except IE6 I believe. – Noldorin Jun 10 '09 at 12:00
I did used the space btween the comma. With * or > * some styles get lost. It is not a complete substitution for the css code above. I just have to figure this out, thanks. – Jun 10 '09 at 12:53
@Richard - You're doing something wrong then. div.foo, div.foo * {} works, why not put your attempted code on your question? – Ryan Florence Jun 10 '09 at 14:10

score 4 · Answer 2 · answered Jun 10 '09 at 11:21

4

if practical you could put all content to be 'reset' in an iframe. The iframe contents won't inherit anything.

answered Jun 10 '09 at 11:21

SpliFF

38,186
16
91
120

Likeall elements?? And in the css...#shoutbox{ reset styles} You say if practical, is there a disadvantage off doing it like that – Jun 10 '09 at 11:31
no, iframe must use a href and point to another html page (with its own head, body, etc. The content between the tags is alternative content for browsers that don't support frames (pretty much none now). – SpliFF Jun 10 '09 at 11:54
The disadvantage of iframes is that everything is really in another document and you can't move any of the iframe content outside the frame. Google may treat the iframe content as an independant page. The advantage is that your JS/CSS styles won't clash. – SpliFF Jun 10 '09 at 11:57
An iframe is a lot like a secondary window (except less likely to get completely unhooked), so these comments apply to both cases. An iframe is an entirely separate CSS context from the containing page and also a mostly separate JavaScript context (completely separate if the iframe is displaying content from a different server). – podperson Mar 02 '13 at 15:44

score 2 · Answer 3 · answered Jun 10 '09 at 11:31

As mentioned previously @Noldorin, you want a selector that selects all descendants (or children) using the universal selector.

For more info on selectors, check out W3C's documentation. CSS2 selector info is here

Example code (i've chosen to use a selector by ID as opposed to class) to illustrate:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>CSS Reset</title>

<style>
.red{
    color: red;
}
.blue{
    color: blue;
}
.green{
    color: green;
}

#reset *{
    color: black;
}

#resetc > *{
    color: black;
}

</style>
</head>
<body>
<h1>With Descendant Reset Style</h1>
<div id="reset">
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>

<h1>With Child Reset Style</h1>
<div id="resetc">
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>

<h1>Without Reset Style</h1>
<div>
  <div class="red">Red</div>
  <p class="green">Green<span class="blue">Blue</span></p>
</div>
</body>
</html>

reset multiple css styles for one single div element

3 Answers3

Linked