CODEWITHSUNDEEP
javascripthtmlcss
OrionSuperman
OrionSuperman

Reputation: 31

How to prevent styles from reaching into div

I have an interesting situation I'm trying to find a solution to.

There is a script that needs to be included that builds an HTML element on the page. The issue is that there are global defaults CSS styles that are interacting with this built element and preventing it from functioning.

So our ".core-design form" has a property that is being applied to this built element's form. None of our style needs to be used, as the script is calling in its own stylesheet.

Is there a way to prevent the div containing this element from getting any and all styles from our .core-design?

Edit: To add some clarity as to specifics.

1) The core-design class is attached to every page across many sites.

2) The sub-elements being targeted are the element names, not classes.

3) I am able to add styling to target the div around the generated content, but want to avoid modifying .core-design stylesheet due to its scope.

4) The generated content pulls in its own stylesheet.

5) I have no control over the content being pulled in, and it may change in the future.

6) Codepen of the situation I am currently in

body {
  // the .core-design is applied here which contains the form styles.
}
form {
  min-height:300px;
  min-width:300px;
  background-color:black;
}
<body>
  <div class="controlled">
    <div class="generated">
      <form>
        <!--
        I need to prevent this form/generated div from inheriting any styles. Including any other sub-components inside of it. The only item I 'control' is the wrapping div.
        -->
      </form>
    </div>
  </div>
</body>

Upvotes: 2

Views: 3394

Answers (4)

Dalin Huang
Dalin Huang

Reputation: 11342

Solution 1:

Simple, it is all about CSS selector.

Add a class called ignore-this to the form you want to be ignored.

Then update the global css to have form:not(.ignore-this).

Example below, CSS applied to 1st form but skip the 2nd form.

.core-design form:not(.ignore-this) {
  background: red;
}
<div class="core-design">
  <form>
    form 111111
  </form>
  <form class="ignore-this">
    form 222222
  </form>
</div>

Solution 2 (updated)

since you have no control over the core-design css, what you could do is to add a css rule like the following and add the class name to the form you want to reset CSS style:

form.ignore-this{
  all: unset;
}

The CSS all shorthand property resets all properties, apart from unicode-bidi and direction, to their initial or inherited value.

REF: https://developer.mozilla.org/en/docs/Web/CSS/all

enter image description here

.core-design form {
  background: red;
  border: 2px solid green;
}

form.ignore-this{
  all: unset;
}
<div class="core-design">
  <form>
    form 111111
  </form>
  <form class="ignore-this">
    form 222222
  </form>
</div>

Upvotes: 1

Tony
Tony

Reputation: 3058

This should reset all styles:

div.className * { 

     all: initial; 
     all: unset; 

}

Upvotes: 1

Goran Stoyanov
Goran Stoyanov

Reputation: 2311

Yes, there's a way. You can use the all CSS property. More info here https://developer.mozilla.org/en-US/docs/Web/CSS/all.

There's no support for IE :(, but there are polyfills available.

Upvotes: 1

Chukwu Remijius
Chukwu Remijius

Reputation: 323

Not so clear but i think you are having css override issues. If you know the names of the classes and ids the div has you can change you ids and class names of the core-design so they wouldnt be the same. Like: if you have a class named .navi and the div contains .navi css will try to either override that of the div or that of the core depends. Make sure your cores class and id names are unique from that of the div

Upvotes: 0

Related Questions