Problems with first-child and last-child CSS selectors

Question

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?

Answer 1

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> 

Answer 2

[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.

Answer 3

you can try this

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

Answer 4

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 */
}