How to make a CSS style not inherited to descendents?

Question

I have a div that I need to set the white-space to "no-wrap" but when I do that all the child elements are set to no-wrap and it messes things up. How do I apply a style only to one element but not have other elements inherit it?

Is this the way to do it:

#element {
   white-space: nowrap;
}

#element * {
   white-space: initial;
}

Or is there a better way? I would rather it only be one style declaration.

<div id="element"> 
   <div id="other1"><div>
   <div id="other2"><div>
   <div id="other3"><div>
   <div id="other..."><div>
   <div id="other100"><div>
</div>

I am trying to apply this to all descendants not merely the first child nodes as other similar posts mentioned but do not answer.

Thanks T3. Not a duplicate because that question does not specify an answer for descendants only first child nodes. — 1.21 gigawatts, Nov 10 '15 at 07:59
[this](http://stackoverflow.com/a/5916389/2865814) answer however comments on the problem in general. You might be right that it is not necessearily a duplicate. IMHO it should be linked somehow though — T3 H40, Nov 10 '15 at 08:03

Yeldar Kurmangaliyev · Answer 1 · 2015-11-10T08:04:08.633

4

You cannot do this.
You will have to overwrite all styles, since they all have inherit value.

You can make a rule for all elements like you have described in your question:

#element {
    whitespace: nowrap;
}

#element * { 
    whitespace: initial;
}

However, it may cause performance problems since it will apply the rule to the every single element.

The easiest way to avoid inheritance is not to have child elements, which can inherit this style. Just extract your text to an another element, so that it has no child elements and apply your white-space: nowrap; only to it:

<div id="element"></div> <!-- white-space: nowrap (CSS rule) -->

<div id="other1"><div> <!-- white-space: normal (default) --> 
<div id="other2"><div>
<div id="other3"><div>
<div id="other..."><div>
<div id="other100"><div>

instead of

<div id="element"> <!-- white-space: nowrap (CSS rule) -->
    <div id="other1"><div> <!-- white-space: nowrap (inherited)--> 
    <div id="other2"><div>
    <div id="other3"><div>
    <div id="other..."><div>
    <div id="other100"><div>    
</div>

edited Nov 10 '15 at 08:04

answered Nov 10 '15 at 07:38

Yeldar Kurmangaliyev

33,467
12
59
101

You are saying do something like `class="noWrapStyle"` and descendents `class="wrapRuleStyle"`? I am explicitly setting white-space styles because otherwise they will always be inherited? Can you add the CSS you are describing? – 1.21 gigawatts Nov 10 '15 at 07:47
From what you're saying is add another element around my child elements that has style set back to normal? That is what I think you mean but the HTML markup you have written does not reflect that. As for performance problems, I understand what you mean. What if there is only a few descendants to the element parent? – 1.21 gigawatts Nov 10 '15 at 08:03
@1.21gigawatts No, just a bad example. Simply do not create any child elements in your `element` and it will fix the problem. Why should they be within `#element`? Why not near? – Yeldar Kurmangaliyev Nov 10 '15 at 08:04
I'm using `#element` to position the child elements. I'm using `nowrap` to keep them inline and prevent them from breaking to the next row. But the child elements have text that should be able to wrap. When they inherit `nowrap` the text goes off the page. If I remove `nowrap` from `#element` some child elements wrap to the next line. Child elements cannot wrap, child element content can wrap. – 1.21 gigawatts Nov 10 '15 at 08:16

Danield · Answer 2 · 2015-11-10T08:51:04.000

If there are many child elements, I would consider adding a wrapper element to the child elements (so as not to bloat the markup with classes)... Like so:

   <div id="element"> 
      <div class="wrapReset">
         <div id="other1"><div>
         <div id="other2"><div>
         <div id="other3"><div>
         <div id="other..."><div>
         <div id="other100"><div>
     </div>
  </div>

With:

#element {
   white-space: nowrap;
}

#element .wrapReset {
   white-space: normal; /* 'normal' is the initial value for white-space */
}

If however there are only few child elements, I would prefer to add a class to the child elements. like so:

<div id="element"> 
   <div class="wrapReset" id="other1"><div>
   <div class="wrapReset" id="other2"><div>
</div>

With CSS (Same as above)

#element {
   white-space: nowrap;
}

#element .wrapReset {
   white-space: normal;
}

Actually, a class like 'wrapReset' might actually be a good candidate for using !important (and could be applied in both examples above)

Like so:

.wrapReset {
   white-space: normal !important;
}

How to make a CSS style not inherited to descendents?

2 Answers2