%% date:: [[2023-01-16]] %% # [[Specificity]] Specificity is the algorithm that determines which [[CSS]] declaration is applied to an element in case there are competing declarations. [^mdn] The algorithm consists of three columns: - ID - CLASS - TYPE For each selector that matches the element, the number of selector components is placed in each of the three columns. The columns are also ordered by decreasing specificity (ID is more specific than CLASS). When two selectors are competing, their three-column values are compared, column by column. The selector with higher specificity (is more specific) will apply. This behaviour can be bypassed by using `!important`. [^maelstrom] [^mdn]: Mozilla. *Specificity*. Retrieved from https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity [^maelstrom]: @LittleMaelstrom#6794 on Discord. (2023). Conversation.