Is there anyway to select only the first descendant using CSS. For example, is there anyway to start at the .container element and style the <li class="example"> with a blue border, but not the <p class="example"> within it?
I know there are a ton of alternative ways to to this in CSS. But is there a way to do it with the exact code below? Meaning use only the selector classes .container and .example, leave the class .container exactly where it is within the HTML below, and use the exact HTML markup below.
<style>
.container .example{
border: 1px solid blue;
}
</style>
<div>
<div class="container">
<ul>
<li class="example"><p class="example"></p></li>
<li class="example"><p class="example"></p></li>
</ul>
</div>
</div>
See Question&Answers more detail:os