从元素及其子元素中删除所有CSS属性

Question

The title says it all. Is it possible to make an element and all its children lose all CSS properties?

Demo:

<div class="class-defined-but-should-not-affect-the-div">
<!-- content + children -->
</div>

CSS:

.class-defined-but-should-not-affect-the-div {
    background-color: green;
}

.class-defined-but-should-not-affect-the-div > .content {
   /* tons of other properties */
}

This example is just to make you understand, the actual situation is different. The element, that I want to STAY AWAY from CSS properties consists of tons of child elements. I can't gather all the classes and ids and undo the effects. I need some dynamic solution, probably via JS.

EDIT: Without removing the class and id attributes.

Any help would be appreciated.

Answer 1

You can use the all property to unset all properties.

 body { font-size: small; background-color: #F0F0F0; color:blue; } blockquote { background-color: skyblue; color: red; } blockquote { all: unset; } 

 <blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis. 

Snippet from linked source

Answer 2

You cannot just simply remove CSS properties of an element. You can overwrite them or remove its class or id .

The best approach is to have a toggle class.

 setTimeout(()=>{ document.getElementsByClassName('class-defined-but-should-not-affect-the-div')[0].classList.remove('toggle'); }, 2500); 

 .class-defined-but-should-not-affect-the-div { font-size: 20px; color: grey; } .toggle.class-defined-but-should-not-affect-the-div{ background-color: red; padding: 5px; } .toggle.class-defined-but-should-not-affect-the-div * { /* all children */ background-color: blue; padding: 5px; } .toggle.class-defined-but-should-not-affect-the-div p { background-color: yellow; } 

 <div class="toggle class-defined-but-should-not-affect-the-div"> <div> <p>Text</p> </div> </div> 

Answer 3

You can establish all: initial; inside parent div for restoring defaul CSS inside it. Once done that, you can establish new CSS styles on its childrens.

Here is a definition of CSS all clause:

The all property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value (all: initial | inherit | unset;).

• Changes all the properties applied to the element or the element's parent to their initial value
• Changes all the properties applied to the element or the element's parent to their parent value
• Changes all the properties applied to the element or the element's parent to their parent value if they are inheritable or to their initial value if not

 body { /* Set CSS for all document */ color: green; font-size: 30px; font-weight: bold; } div { /* Set CSS for all DIVs */ background-color: blue; border: solid 7px black; } .class-defined-but-should-not-affect-the-div { all: initial; /* Set default CSS */ } .class-defined-but-should-not-affect-the-div > .content { /* Set new CSS for DIV childrens with "content" class */ background-color: yellow; color: blue; } 

 <div class="class-defined-but-should-affect-the-div"> I have got CSS styles </div> <div class="class-defined-but-should-not-affect-the-div"> I have not got CSS styles <br/> <label class="content"> I have got new CSS styles</label> </div>