Disinherit (reset) the CSS style of a specific element?

Question

Ok, I have a beautiful web, with its styles within a CSS and everything

But now I've found a problem, I want ONE list to be virgin, without any style inherited.

I know I can do it just giving it a style="(...)" so it overwrites the inherited style, but, is there any instruction / trick / something to do it without doing this?

Im confused with what your asking. Can you give an example of what you mean? — Undefined, Mar 01 '12 at 11:49
@SamWarren "How can one fix a previously applied overzealous selector?" :) Anyway, one could also use `!important` stuff, but it would still have to be manually reset for various properties. — , Mar 01 '12 at 11:52
Of course Sam: In my page, I have some lists inheriting style so they are shown in a beautiful way. But then, I have one list I don't want to be shown as a "usual" list. Well, exactly I have a field near an imput that suggests you results via AJAX (like Facebook does for example). I show the suggestions as a list for practical purposes, and I don't want THIS list to be shown as a list with all the styles I have defined for a usual list. — ArcDare, Mar 01 '12 at 11:55
Related but a much more specific (isolated) question: http://stackoverflow.com/questions/8228980/reset-css-display-property-to-default-value — BoltClock, Mar 01 '12 at 13:04
As to why we need this, often there's 50,000 lines of garbage coming from Twitter Boostrap and its ilk, layers upon layers of garbage (think Envato themes.) — PJ Brunet, Jan 24 '17 at 00:00

Marat Tanalin · Answer 1 · 2017-06-26T19:29:08.220

10

The CSS Cascading and Inheritance Level 3 specification introduces ability to reset all properties at once. This is achieved by using the all shorthand property with the value of initial or unset depending on whether you need to reset inherited properties.

Note that these have nothing to do with browser’s default values.

The feature is available in Firefox 27+, Chrome 37+, and Opera 24+.

Until the feature is widely implemented, you can use “namespace” classes. For example, to separate layout styles from content styles, a class like content could be used as a namespace for all content styles.

Simplified example:

/* Global styles for UL lists. */
UL {list-style: none; margin: 0; padding: 0; }

/* Styles for UL lists inside content block. */
.content UL {list-style: disc; margin: 1em 0 1em 35px; }

edited Jun 26 '17 at 19:29

answered Mar 01 '12 at 12:59

Marat Tanalin

13,927
1
36
52

1

Did you mean to say "reset CSS properties to their browser-default values"? Initial values have the `initial` keyword, but that's different from browser defaults. – BoltClock Mar 01 '12 at 13:01
This does not solve the case where the initial value is "inherit", such as with background. There's no way to "reset" a div's background color to what it would be on a blank page. In other words, sandboxing is impossible. – JS_Riddler Feb 06 '15 at 21:48

score 3 · Answer 2 · edited Feb 28 '14 at 20:32

3

This is a problem that is solved best by avoiding it from the beginning. I try to keep contextual (or descendant) selectors to a minimum and I avoid using tag names as selectors. Instead I make use of classes so that my html elements (<a>, <p>, <ul>, <span>, etc) will always look like they've not been styled no matter what the context/its parent element is.

In your case, I think you can only overwrite the inherited styles as you have mentioned with the inline-style attribute or with !important or even better, create a .reset class:

.reset { with: auto; height: auto; padding: 0; /* etc */ }

All solutions mentioned above have drawbacks, so you'll need to choose your battle.

edited Feb 28 '14 at 20:32

Michael

8,362
6
61
88

answered Mar 01 '12 at 12:04

T. Junghans

11,385
7
52
75

2

I agree. If you need this solution, you probably have a design-flaw. – sshow Mar 01 '12 at 12:35
"contextual selectors", one of the coolest things about CSS1 a long time ago :) – BoltClock Mar 01 '12 at 12:58

score 2 · Answer 3 · edited Jul 13 '15 at 08:14

2

You can try this http://cleanslatecss.com/ it completely reset the target element, it's only css, no js, you just have to add a class to the target and it's all done.

The problem I found in the other answers is that nobody used !important so it could happen that the reset may not be applied to the element, everything is solved with cleanslate that do that for you.

edited Jul 13 '15 at 08:14

user247702

23,641
15
110
157

answered Jul 04 '15 at 20:31

ZwartyZ

308
1
9

http://cleanslatecss.com/ this library is awesome. Exactly what I was looking for – Gijo Varghese Feb 03 '18 at 13:40

score 1 · Answer 4 · edited Jun 20 '20 at 09:12

Shadow DOM

The feature(s) of the Shadow DOM v1 currently (constantly subject to change) have growing support, offering a wealth of possibilities, including scoped CSS.

Shadow DOM v0 was implemented in Chrome/Opera but other browser vendors are implementing v1.
MS Edge status: Under Consideration
Firefox status: in-development

From Google Developers: Shadow DOM v1: Self-Contained Web Components:

Hands down the most useful feature of shadow DOM is scoped CSS:

CSS selectors from the outer page don't apply inside your component.

Styles defined inside don't bleed out. They're scoped to the host element.

CSS selectors used inside shadow DOM apply locally to your component. In practice, this means we can use common id/class names again, without worrying about conflicts elsewhere on the page. Simpler CSS selectors are a best practice inside Shadow DOM. They're also good for performance.

Below, we attachShadow to a new createElement( "div" ) to which we apply the style.all = "unset" to disinherit all the rules applied to the rest of the document's divs.

We then fill our shadow-root with whatever content we like, and supply any styles desired, before appendChild( "new_div" ) injects our content into the body.

The result is stylistically isolated content.

const new_style = document.createElement( "style" ),
      new_div = document.createElement( "div" ),
      new_list = document.createElement( "ul" ),
      new_entries = [ "Lorem", "Ipsum", "Dolor" ],
      shadow = new_div.attachShadow( { mode: "open" } );
new_style.textContent = "ul { list-style: none; }";
new_div.style.all = "unset";
new_entries.forEach( ( v ) => {
  var li = document.createElement( "li" );
  li.textContent = v;
  new_list.appendChild( li );
} );
shadow.appendChild( new_style );
shadow.appendChild( new_list );
document.body.appendChild( new_div );

body {
  background: antiquewhite;
}
ul {
  margin: 2em;
  border: 2px gray solid;
  border-right: 0;
  border-left: 0;
  background: cornflowerblue;
}
li {
  margin: inherit;
  font-family: "Comic Sans MS";
}

<body>
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
    <li>Qux</li>
  </ul>
</body>

Disinherit (reset) the CSS style of a specific element?

4 Answers4

Shadow DOM

Linked

Related