Some of CSS modules styles are not being applied

Question

I have a hard time applying one of my CSS rules using CSS modules.

Here is React code and CSS styles. All rules are working except the active class when applied to anchor. I have tried different names, different selectors, but I can't make it work with anchor element (hover and active pseudo classes are working correctly).

import React from 'react';

import classes from './NavigationItem.css';

const navigationItem = (props) => {
  return (
    <li className={classes.NavigationItem}>
      <a 
        className={classes.active}
        href={props.link} >
        {props.children}</a>
    </li>
  );
};

export default navigationItem;

.NavigationItem {
    margin: 0;
    box-sizing: border-box;
    display: flex;
    height: 100%;
    align-items: center;
}

.NavigationItem a {
    color: white;
    text-decoration: none;
    height: 100%;
    padding: 16px 10px;
    border-bottom: 4px solid transparent;
    box-sizing: border-box;
    display: block;
}

.NavigationItem a:hover,
.NavigationItem a:active
.NavigationItem a.active {
    background-color: #8f5c2c;
    border-bottom: 4px solid #40a4c8;
    color: white;
}

If I use inline style object with the same CSS properties then it works correctly.

const style = { 
  backgroundColor: '#8f5c2c',
  borderBottom: '4px solid #40a4c8',
  color: 'white'
};

Chrome devtools also shows that the anchor is getting the active class.

Does anyone have any idea why?

Answer 1

There is a missing comma here: .NavigationItem a:active at the end. It should be like that:

.NavigationItem a:hover,
.NavigationItem a:active,
.NavigationItem a.active {
    background-color: #8f5c2c;
    border-bottom: 4px solid #40a4c8;
    color: white;
}