CODEWITHSUNDEEP
htmlcss
BugHunterUK
BugHunterUK

Reputation: 8938

Problems with first-child and last-child CSS selectors

I'm using CSS to target a specific element in the following code. The element I want to target is the last element in the first div (.1g07). I need to do this without referring to .1g07 as the class name is dynamic.

Here is the CSS I use:

[data-sigil="reactions-bling-bar"]:first-child:last-child

And the HTML:

<a href="#" data-sigil="feed-ufi-trigger">
    <div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
    <div class="_1g07">
        <div class="_1g05" style="z-index:3">
            <i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
        </div>
        <div class="_1g05" style="z-index:2">
            <i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
        </div>
        <div class="_1g05" style="z-index:1">
            <i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
        </div>
        <div class="_1g06">48</div>
    </div>
    <div class="_1j-b"><span class="_1j-c">12 comments</span></div> 
    </div>
</a>

It's not targetting this element though (in this case the element that contains the number 48).

Any ideas on where I am going wrong?

Upvotes: 0

Views: 215

Answers (4)

Adysone
Adysone

Reputation: 121

your CSS selector targets nothing, because:

  • [data-sigil="reactions-bling-bar"] targets the div with the attribute data-sigil having the value reactions-bling-bar;
  • [data-sigil="reactions-bling-bar"]:first-child targets the div with the attribute data-sigil having the value reactions-bling-bar AND which is the first child of its container;
  • [data-sigil="reactions-bling-bar"]:first-child targets the div with the attribute data-sigil having the value reactions-bling-bar AND which is the first child of its container AND which is the last child of its container.

This can't work.

If you can't modify the HTML, I dont think you can do what you want, maybe with:

[data-sigil="reactions-bling-bar"] > div > div:last-child {
    /* CSS rules here */
}

Upvotes: 0

Anubhav pun
Anubhav pun

Reputation: 1323

you can try this

#u_1_k div div:last-child
{
/* css as you wants */
}

Upvotes: 0

ajm
ajm

Reputation: 20105

[data-sigil="reactions-bling-bar"]:first-child:last-child targets an element with a data attribute called sigil that is both the first and last child of its parent.

I think you're looking for [data-sigil="reactions-bling-bar"] > :first-child > :last-child, which would select the last child of the first child of the element with that data-sigil attribute.

Upvotes: 1

Asons
Asons

Reputation: 87191

You can do like this

[data-sigil="reactions-bling-bar"]  div div:last-child
[data-sigil="reactions-bling-bar"] :first-child :last-child

Sample snippet 

[data-sigil="reactions-bling-bar"]  div div:last-child
{
  color: red
}
<a href="#" data-sigil="feed-ufi-trigger">
  <div class="_rnk _2eo- _1e6" id="u_1_k" data-sigil="reactions-bling-bar">
    <div class="_1g07">
      
      <div class="_1g05" style="z-index:3">
        <i class="img sp_I5ooBdwh_8A sx_9a2202"></i>
      </div>
      <div class="_1g05" style="z-index:2">
        <i class="img sp_I5ooBdwh_8A sx_1f77a0"></i>
      </div>
      <div class="_1g05" style="z-index:1">
        <i class="img sp_I5ooBdwh_8A sx_fbc017"></i>
      </div>
      
      <div class="_1g06">48</div>
      
    </div>
    <div class="_1j-b"><span class="_1j-c">12 comments</span></div> 
  </div>
</a>

Upvotes: 2

Related Questions