I have been breaking my brain over what “Matches elements with no parent” means, and it seems there is absolutely no documentation (https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-last-child#browser_compatibility) on what it is and why it magically works for every browser except safari.

Given this HTML:

<div class="parent">
    <div class="card card--primary"></div>
    <div class="card card--primary"></div>
    <div class="card card--primary"></div>
    <div class="card card--secondary"></div>
    <div class="card card--secondary"></div>
</div>

I want to be able to add certain styling to the last card–primary, however the number of primary and secondary cards is dynamic. So I can’t just use an nth selector, I need to get the last –primary card regardless of how many there are. So my logic was to use:

.card:nth-last-child(1 of .card--primary) {
    //some code
}

This seems to work perfectly in every browser except for Safari, assuming because of the “Matches elements with no parent”. Is there anything I can do here to get it to work?