reset multiple css styles for one single div element

jquery css styles css-reset

18,647

Solution 1

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
}

Solution 2

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

Solution 3

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>

18,647

Author by

Admin

Updated on June 13, 2022

Comments

Admin almost 2 years

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