Problems with first-child and last-child CSS selectors - html

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