Menu
When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your stylesheet. Instead of having two, three, or more CSS rules that do the same thing (set the color of something to red, for example), you use a single CSS rule that accomplishes the same thing.
It's easy to apply style to a child element, but if you want to apply style to a parent class that already has child elements, you can use the CSS selector child combinators (>), which are placed between two CSS selectors. For example, div > p selects all <p> elements where the parent is a <div> element.
The * selector selects all elements. The * selector can also select all elements inside another element (See "More Examples").
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With