How can I select the last element with a specific class, not last child inside of parent?
To select the last element with a specific class, exploit JavaScript's querySelectorAll:
Just swap '.your-class' with your targeted class to access the last element of that class straight away.
In search of a CSS-only method
If you prefer or need to keep it only CSS, sadly there isn't a direct method to select the last element with a specific class which doesn't sit as the last child in its parent. Enter the world of tactical selection.
Peeling layers: Understanding how selectors work
Misconceptions around :last-of-type
The :last-of-type selector, although deceivingly apt for the job, will only target the last entry of a specific element type, not classes. This isn't helpful when hunting for .comment that might not stick to a singular element like <article>.
Browser support hurdles for :has() selector
One could toy around with a selector like :not(:has(~ .your-class)) – a smart quirk to define "grab elements not preceded by any sibling with .your-class". But it suffers from a case of crippling browser support and doesn't operate universally.
Remaining updated with browser support changes
Keep yourself abreast of all the updates on browser support for selectors like :nth-last-child and :has() over at the ever-handy caniuse.com. But don't forget, while Safari has solid support for :nth-last-child(1 .your-class), it stands as the lonely island in the vast ocean.
Exploring alternative strategies with CSS
If you find CSS not co-operating directly with your needs, these alternative strategies can play the knight in shining armour:
Flipping the script using float
Change the game plan and transform your HTML layout by applying float: right; to the CSS, inversing the visual order of elements. Paired with the adjacent sibling selector (+), you could target the last instance of a class behaving as it were the first. // It's like bending the Matrix; the rules are now in your hands 😉
The dynamic duo of pseudo-classes
Pair up :not() and :has() selectors to catch an element that doesn’t have a particular class and isn’t trailed by another element stocked with that class. Again, it's a charmingly crafty hack, but doesn’t boast universal support.
Unleashing the versatility of JavaScript
CSS may hit a dead-end, but JavaScript often graces us with alternate solutions. document.querySelectorAll('.your-class').item(-1) ensures that you fetch exactly what you want in spite of clashing with the confines of CSS selectors. // It's like getting the backstage pass!
The evolving CSS specification
CSS specification drafts, like Selectors Level 4, keep changing and expanding. You may find the solution for selecting the last element with a specific class natively in CSS in the future iterations. // Keeping up with the Kardashians? Try keeping up with the CSS Working Group.
Was this article helpful?