Question: I have an HTML structure like so:

```
<div class="outer">
    <div class="parent">
       <div class="child"> <!-- TARGET THIS CLASS -->
       Words!
        </div>
    </div>
    <div class="parent">
       <div class="child">
       Words!
        </div>
    </div>
</div>

```

I am trying to target the first occurrence of the `.child` class in the HTML. I have tried 

```
.child:first-child

```

But that targets both `child` classes. I have also tried 

```
.outter > .child:first-child

```

But that doesn't seem to target the `div` at all. Any suggestions?

Answer: 
Unfortunately, that isn't quite available in css. You can however do this:

```
.parent:first-child .child:first-child { //css here }

```

There is an assumption here that the first `child` element in inside the first `parent` element. If it isn't, and the first `parent` element is empty, this will target nothing.
`:first-child` targets the first occurence of an element within the parent. Because both `.child` classes are the first child of their parents, they'll both be targeted by the css you have.

For your desired effect, use this:

```
.outer .parent:first-child .child:first-child

```