CODEWITHSUNDEEP
javascriptcss
saibbyweb
saibbyweb

Reputation: 3244

Remove all CSS properties from an element and its children

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.

Upvotes: 1

Views: 4661

Answers (3)

JuMoGar
JuMoGar

Reputation: 1760

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;).

  • initial: Changes all the properties applied to the element or the element's parent to their initial value
  • inherit: Changes all the properties applied to the element or the element's parent to their parent value
  • unset: 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>

Upvotes: 1

user2628521
user2628521

Reputation:

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>

Upvotes: 0

SuperDJ
SuperDJ

Reputation: 7661

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

Upvotes: 2

Related Questions