'How to set padding to all children elements?

I have the following markup:

<td style="__WHAT?__">
   <div class="generated-framework-class">
      <div class="generated-framework-class">
         <!-- ... -->
      </div>
   </div>
</td>

What should I write into the style attribute to set padding: 0px to all children divs. I can't set this padding directly to those divs because they are generated by an UI-framework. Is it possible to do strictly on css, without JS?

javascripthtmlcss


Solution 1:[1]

What you can do is wrapping another div around the elements. You are able to use the CSS Selector "element element" to define the style. 

.whatever div {
  padding: 0;
  
  width: 40px;
  height: 40px;
  background: purple;
}

.whatever div div {
  padding: 0;
  
  width: 30px;
  height: 30px;
  background: beige;
}
<td>
    <div class="whatever">
       <div class="generated-framework-class">
          <div class="generated-framework-class">
             <!-- ... -->
          </div>
       </div>
    </div>
</td>

Solution 2:[2]

According to Attribute Selectors, style is also an attribute, so you can query it by [].
So td[style*="__WHAT?__"] div selects all the divs thich are descendants of element td with attribute style="__WHAT__".

td[style*="__WHAT?__"] div {
    padding: 0;
}
<td style="__WHAT?__">
  <div class="generated-framework-class">
    <div class="generated-framework-class">
      <!-- ... -->
    </div>
  </div>
</td>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 OddDev
Solution 2 Brainor

Related Questions