CODEWITHSUNDEEP
htmlcss
Barry Tormey
Barry Tormey

Reputation: 3126

First Child of Ancestor CSS

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?

Upvotes: 2

Views: 807

Answers (6)

Damien Black
Damien Black

Reputation: 5647

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.

Upvotes: 3

feitla
feitla

Reputation: 1334

You can use multiple pseudo classes (just not on the same element)

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

Upvotes: 2

BigBob
BigBob

Reputation: 523

.parent:first-child

seems to work

Upvotes: 0

steinmas
steinmas

Reputation: 398

: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

Upvotes: 0

user3056052
user3056052

Reputation: 1467

Get the first child of outer then get the first child of that parent.

Upvotes: 0

Justin Bicknell
Justin Bicknell

Reputation: 4808

You need to target it based on the parent class like so:

.outer  > .parent:first-child > .child:first-child

Upvotes: 2

Related Questions