René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"CSS specificity/order problem","articleBody":"Hi,\r\n\r\nI have encountred problem I am not able to solve.\r\nI 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.\r\n\r\nI 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\r\n\r\n/* HTML SNIPPET */\r\n\u003cdiv class=\"canvas__circle circle--white circle--red\"\u003e\u003c/div\u003e\r\n\u003cdiv class=\"canvas__circle circle--red circle--white\"\u003e\u003c/div\u003e\r\n\r\n/* STYLES SNIPPET */\r\n.canvas__circle {\r\n  height: 15px;\r\n  width: 15px;\r\n  border-radius: 50%;\r\n  position: absolute;\r\n  animation: fade-in 1s 1s backwards;\r\n}\r\n\r\n.circle--white {\r\n  background-color: #fff;\r\n}\r\nC:\\ProjectsFila\\_bytegrad\\SocialEditor\\index.html\r\n.circle--red {\r\n  background-color: rgb(255, 0, 0);\r\n}\r\n\r\nNo other styles are interfering there (red is only specified in circle--red in my project).\r\n\r\nDo 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 \u003chtmlElement className = {\"myClassName \" + this.props.className }    but now I am not sure if the properties of custom styles will correctly override component default style.\r\n\r\n\r\nThank you in advance for any kind of help/advice.\r\n\r\nHave a great day!\r\nFilip","author":{"url":"https://github.com/FilipXSv","@type":"Person","name":"FilipXSv"},"datePublished":"2024-02-10T20:15:29.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/11/Professional-CSS-Course/issues/11"}