ansaurus

Question

reset multiple css styles for one single div element

Answer 1

+1 A:

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

SpliFF 2009-06-10 11:21:19

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

2009-06-10 11:31:46

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 2009-06-10 11:54:09

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 2009-06-10 11:57:13

okay, I am just going to find how to use iframe

2009-06-10 12:02:26

Answer 2

+5 A:

Try this:

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

which will apply the styles to the div with ID "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
}

Noldorin 2009-06-10 11:22:02

I believe he's selecting all descendants [or children] plus the contents of the div

tschaible 2009-06-10 11:32:17

oh, the comma separates the selectors, got it. I will try that

2009-06-10 11:33:55

the space after the comma matters

SpliFF 2009-06-10 11:58:12

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 2009-06-10 12:00:01

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.

2009-06-10 12:53:01

@Richard - You're doing something wrong then. div.foo, div.foo * {} works, why not put your attempted code on your question?

rpflo 2009-06-10 14:10:28

Answer 3

+1 A:

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"&gt;
<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>

tschaible 2009-06-10 11:31:41

+1 thanks a lot !

4thpage 2010-05-14 07:26:06

ansaurus

tags:

views:

answers:

reset multiple css styles for one single div element

related questions