I'm learning the React as beginner. I'm working with CSS modules.

Menu.module.css is not 100% working, it's not applying styles for .menu a.last selector and I don't realize why (it's perfectly working for .menu a). The problem persist by using CSS modules, but it works as intended with plain CSS.

Menu.jsx

import styles from './Menu.module.css'

export default function Menu({ className, items = [], children }) {
    return (
    <div className={`menu ${styles.menu} ${className || ''}`}>
      {children ? <h2>{children}</h2> : ''}
      <ul>
        {items.map((item, i) => (
          <li key={i}>
            <a
              href={item.href}
              className={item.className || ''}
            >
              {item.name}
            </a>
          </li>
        ))}
      </ul>
    </div>
  )
}

Menu.module.css

.menu a {
  color: black;
  text-decoration: none;
}

.menu a.last {
  background: red !important;
}

Image of the code and HTML: https://ibb.co/r5m6W7s

I can get the a.last element through the console using the same querySelector as the CSS file is using so this leads me to think that there is a logical problem or CSS Modules selectors works differently than CSS this time.

I suppose it's a very easy to solve problem but can't get it. Thank you for your help.

Switched back to plain CSS to check if it would work and yes, it did work.

Tried to do it again from scratch with CSS Modules but it resulted in the same problem.

Tried changing class names even using plain class (not randomly generated by the CSS Modules compiler) and used this plain class name to check and it didn't work while still working with the .module.css file.