reset multiple css styles for one single div element

Asked 10/6, 2009 at 11:16 Answered 10/6, 2009 at 11:31

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

Trigg answered 10/6, 2009 at 11:16 Comment(2)

possible duplicate of Reset/remove CSS styles for element only – Carillon 28/2, 2014 at 13:1

Not a duplicate, but definitely related. – Zebu 19/4, 2014 at 4:39

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
}

Calabrese answered 10/6, 2009 at 11:22 Comment(6)

I believe he's selecting all descendants [or children] plus the contents of the div – Viveca 10/6, 2009 at 11:32

oh, the comma separates the selectors, got it. I will try that – Trigg 10/6, 2009 at 11:33

the space after the comma matters – Unsought 10/6, 2009 at 11:58

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. – Calabrese 10/6, 2009 at 12:0

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. – Trigg 10/6, 2009 at 12:53

@Trigg - You're doing something wrong then. div.foo, div.foo * {} works, why not put your attempted code on your question? – Raucous 10/6, 2009 at 14:10

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

Unsought answered 10/6, 2009 at 11:21 Comment(4)

Like<iframe id="shoutbox">all elements</iframe>?? And in the css...#shoutbox{ reset styles} You say if practical, is there a disadvantage off doing it like that – Trigg 10/6, 2009 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). – Unsought 10/6, 2009 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. – Unsought 10/6, 2009 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). – Adkinson 2/3, 2013 at 15:44

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>

Viveca answered 10/6, 2009 at 11:31 Comment(0)

Recommended topics

Hot tags