Why is the selector with lower specificity being applied?

February 2, 2024

See the "Show" button underneath and to the right of "Open modal" on https://fresh-rfui-test.deno.dev/islands.

I have:

<button type="button" class="bg-neutral-50 px-2">Show</button>

and two stylesheets:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>fresh-rfui-test</title>
    <link rel="stylesheet" href="https://rfui.deno.dev/rfui-v0-1-11.css" />
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <Component />
  </body>
</html>

rfui-v0-1-11.css comes before styles.css.

styles.css has:

[type=button],
[type=reset],
[type=submit],
button {
  -webkit-appearance:button;
  background-color:transparent;
  background-image:none
}

The background-color is being set to transparent because of this.

But rfui-v0-1-11.css has:

.bg-neutral-50 {
  --tw-bg-opacity:1;
  background-color:rgb(var(--color-neutral-50)/var(--tw-bg-opacity))
}

I don’t understand why that selector doesn’t take precedence and why it’s value of background-color doesn’t get applied.

Here’s how I’m thinking about it.

I refer to these docs for the cascading order.
For "1. Relevance", both selectors match the <button> and thus don’t get filtered out.
For "2. Origin and importance", they’re both the same. Both have an origin of "author (developer)" and an importance of "normal".
For "3. Specificity", .bg-neutral-50 has a higher specificity than [type=button]. 0-1-0 vs 0-0-1. So then, .bg-neutral-50 should take precedence and have it’s value for background-color applied.

>Solution :

The docs you linked to say:

CLASS column

Includes class selectors, such as .myClass, attribute
selectors like [type="radio"] and [lang|="fr"], and pseudo-classes,
such as :hover, :nth-of-type(3n), and :required.

Both .bg-neutral-50 and [type=button] fall into this category, so both of the selectors have specificity 0-1-0. This can be seen in Safari or Chrome dev tools by hovering on the selector: