Question

I’m trying to style all html with the class called sample

<div class="sample">
</div>

.sample{

}

But I’m running into a situation where the class sample could be nested. In this case I want to style only the inner one. How can I tell the css to apply the style only to the inner div and not to the outer sample? Can this be done?

<div class="sample">
   <div class="sample">
   </div>
</div>

Answer 1

Use the descendant selector for your ruleset:

.sample .sample

If you want to maintain the style on your outer div, then I’d suggest giving it another class, like

.something .sample

Using the same class for all the elements on a page is highly discouraged.