How to make CSS style not inherited descendants?

Question

I have a div that I need to set the empty space to "no-wrap", but when I do this, all the children are set to no-wrap and this will ruin everything. How to apply a style to only one element, but not inherit it on other elements?

This is the way to do it:

#element {
   white-space: nowrap;
}

#element * {
   white-space: initial;
}

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

<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 try to apply this to all descendants, not only to the first child nodes, but also to other similar messages, but not reply.

Answer 1

You cannot do this. You will have to rewrite all the styles, since they all matter inherit.

, :

#element {
    whitespace: nowrap;
}

#element * { 
    whitespace: initial;
}

, .

- , . , white-space: nowrap; :

<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>

<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>

Answer 2

, ( ). :

   <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>

#element {
   white-space: nowrap;
}

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

, , , . :

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

CSS ( )

#element {
   white-space: nowrap;
}

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

, , 'wrapReset', ! important ( )

:

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