I get that the solution is to place the :focus selector and properties before the :active ones but I don’t get why, especially considering that focus and active are different states, even if clicking and activating an element eventually brings it to a focus state

here’s the code

a:hover {
    color: lightpink;
    text-decoration: overline;
}

a:active {
    color: #222;
    font-weight: 700;
}

a:focus {
    color: lightpink;
    text-decoration: overline;
}

Expected the active properties to show for a brief moment when the link was clicked as opposed to not working at all