Presented with a fascinating challenge, I find myself with an ever-changing number of .child.red children. I am in need of referencing the last .child.red element dynamically using styles. Although I have attempted to achieve this on my own, I am curious about your approach: the last child. Intriguing. Appreciate any insight.
.child {
background: blue;
}
.child.red:first-child {
background: red;
}
.child.red:last-child {
background: red;
}<div class="parent">
<div class="child red">
1
</div>
<div class="child red">
2
</div>
<div class="child red">
3
</div>
<div class="child red">
4
</div>
<div class="child">
5
</div>
<div class="child">
6
</div>
<div class="child">
7
</div>
</div>
<!-- begin snippet: js hide: false console: true babel: false -->//// css