Apply a "substyle" to another selector

[ilyvion]

When I have a setup like

<div class="btm-nav">
    <a href="/" class="active">
        ...
    </a>
</div>

it causes Tailwind/DaisyUI to produce CSS like this:

.btm-nav > :where(.active) {
  border-top-width: 2px;
  --tw-bg-opacity: 1;
  background-color: var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity)));
}

which is great, but my framework already sets aria-current="page" on said <a> when the routing matches, and getting that class="active" on there is extra work and, according to the framework's docs,

Performance: If it’s possible to style the link using the CSS with the [aria-current=page] selector, you should prefer that, as it enables significant SSR optimizations.

Unfortunately, it's not turning out to be as simple as doing

a[aria-current="page"] {
    @apply active;
}

in my Tailwind's input CSS file. Is it possible to get that :where(.active) to be :where([aria-current="page"]) instead, or, in some other way, @apply the .btm-nav > :where(.active) style to a[aria-current="page"] somehow?

It's not the end of the world if there's no solution here, as I am able to put the class="active" on there, but I would like to make use of the SSR optimizations mentioned if it is at all possible.

[ilyvion]

Never mind, I just had to remove the a from [aria-current="page"] to get it to work; i.e.

[aria-current="page"] {
    @apply active;
}

works exactly as it should. 😅