CSS specificity/order problem

[FilipXSv]

Hi,

I have encountred problem I am not able to solve.
I have followed your first course of CSS and then experiment on it on topic of specificty and order of classes and figuring out what is being overriden and I encountered following behavior.

I created circle class that just says circle should be red. But it always overrides the second class, where the white is defined. Both classes (even in DevTools) have specificity (0, 1, 0) and so order should matter now - but its not for me. Here is the code snippet

/* HTML SNIPPET */

/* STYLES SNIPPET */
.canvas__circle {
height: 15px;
width: 15px;
border-radius: 50%;
position: absolute;
animation: fade-in 1s 1s backwards;
}

.circle--white {
background-color: #fff;
}
C:\ProjectsFila_bytegrad\SocialEditor\index.html
.circle--red {
background-color: rgb(255, 0, 0);
}

No other styles are interfering there (red is only specified in circle--red in my project).

Do you have any idea why I see such behavior? This is quite serious problem for me because I for example need to use in my react custom components <htmlElement className = {"myClassName " + this.props.className } but now I am not sure if the properties of custom styles will correctly override component default style.

Thank you in advance for any kind of help/advice.

Have a great day!
Filip