# CSS class and descendant selectors practices

**URL:** https://forum.kirupa.com/t/css-class-and-descendant-selectors-practices/328110
**Category:** web dev
**Created:** [April 20, 2012, 1:30am UTC](https://forum.kirupa.com/t/css-class-and-descendant-selectors-practices/328110 "2012-04-20T01:30:04Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![flashgroove](https://avatars.discourse-cdn.com/v4/letter/f/b5e925/32.png) [@flashgroove](https://forum.kirupa.com/u/flashgroove)
#### Post date: [April 20, 2012, 1:30am UTC](https://forum.kirupa.com/t/css-class-and-descendant-selectors-practices/328110/1 "2012-04-20T01:30:04Z")

</div>

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:

1. 

a.

```auto

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

.main > div > div

```

b.

```auto

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

.content

```

1. 

a.

```auto

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

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

```

b.

```auto

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

.content1
.content2

```

1. 

a.

```auto

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

.main > div div

```

b.

```auto

<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 ?