I've been doing web development for like a million years, but this is the first time I've ever encountered this problem (at least as far as my bad memory can remember).
Let's say I have 2 buttons:
<button><i class="icon"></i> My Button</button>
<button>My Other Button <i class="icon"></i></button>
and I wanted to apply styling to an icon but only when it is after the button's content. How on earth can I match that without matching both? I've tried using something like the following, but because the button's content isn't treated as a child element, the icon's background is changed, regardless of where it is within the button:
button *:last-child:is(.icon) {
background-color: hotpink;
}
Here's a fiddle showing a couple different examples: https://jsfiddle.net/pvzkmr4a/4/
What I want to do is style an .icon, but only if it is the last piece of content.
