CSS class and descendant selectors practices

programming web dev
1

I would like to form a better understanding of when it is appropriate to use classes to target content as opposed to other available options, specifically, descendant selectors.

In many cases, instead of using classes, it is possible to use descendant selectors to target the same elements. If the same thing can be accomplished in both ways, what is the logic between deciding an option ?

Here are some example scenarios:

a.


<div class="main">
     <div>
         <div> /* target */
             <div></div>
         </div>
     </div>
</div>


.main > div > div

b.


<div class="main">
    <div>
         <div class="content">
             <div></div>
         </div>
     </div>
</div>


.content

a.


<div class="main">
     <div> /* target */
        <div></div>
     </div>
     <div> /* target */
        <div></div>
     </div>
</div>


.main > div:first-child
.main > div:last-child

b.


<div class="main">
     <div class="content1">
        <div></div>
     </div>
     <div class="content2">
        <div></div>
     </div>
</div>


.content1
.content2

a.


<div class="main">
     <div>
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>


.main > div div

b.


<div class="main">
     <div class="content">
         <div></div>
         <div></div>
         <div></div>
     </div>
</div>


.content div

What is the logic between deciding to use classes or descendant selectors ?