How do I apply a style to all children of an element

by

As commented by David Thomas, descendants of those child elements will (likely) inherit most of the styles assigned to those child elements.

You need to wrap your .myTestClass inside an element and apply the styles to descendants by adding .wrapper * descendant selector. Then, add .myTestClass > * child selector to apply the style to the elements children, not its grand children. For example like this:

JSFiddle – DEMO

.wrapper * {
    color: blue;
    margin: 0 100px; /* Only for demo */
}
.myTestClass > * {
    color:red;
    margin: 0 20px;
}
<div class="wrapper">
    <div class="myTestClass">Text 0
        <div>Text 1</div>
        <span>Text 1</span>
        <div>Text 1
            <p>Text 2</p>
            <div>Text 2</div>
        </div>
        <p>Text 1</p>
    </div>
    <div>Text 0</div>
</div>

More Related Contents:

  1. Is there a CSS parent selector?
  2. Complex CSS selector for parent of active child [duplicate]
  3. Select every Nth element in CSS
  4. CSS3 selector :first-of-type with class name?
  5. CSS Selector that applies to elements with two classes
  6. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  7. CSS ‘>’ selector; what is it? [duplicate]
  8. CSS selector based on element text? [duplicate]
  9. Pure CSS checkbox image replacement
  10. Handling a colon in an element ID in a CSS selector [duplicate]
  11. How to write a CSS hack for IE 11? [duplicate]
  12. :not() selector not behaving the same between Safari and Chrome/Firefox
  13. CSS selector for attribute names based on a wildcard
  14. IE8 :nth-child and :before
  15. CSS selector to select first element of a given class
  16. Can I use variables for selectors?
  17. Combine :after with :hover
  18. CSS: styled a checkbox to look like a button, is there a hover?
  19. Are CSS3 ::before and ::after pseudo elements supported by IE9 or not?
  20. :active css selector not working for IE8 and IE9
  21. CSS Selector for
  22. How can I apply styles to multiple classes at once?
  23. Is it possible to select the last n items with nth-child?
  24. CSS property value from class name
  25. LESS CSS: abusing the & Operator when nesting?
  26. Angular 2: How to style host element of the component?
  27. How do I select an element only when inside another element?
  28. Should I use single colons (:) or double colons (::) for before, after, first-letter and first-line pseudo-elements?
  29. CSS class repetition to increase specificity
  30. select second child

Leave a Comment