MDN Specificity
Specificity is how the browser determines which selector to use when there are multiple CSS rules using the same property on the same HTML element.
The specifity value of a selector is based on the three categories of selectors: ID, class, and type. These categories are put into their own columns, where one column essentially has infinitely more or less weight than the other columns. These columns, in decreasing order, are ID - Class - Type. The specificity score is calculated by adding the amount of each type of selector into its corresponding column.
For example, 50 classes (0-50-0) is less specific than one ID (1-0-0).
MDN Link pseudo-classes
Link pseudo-classes have the same specificity (assuming there are no other selectors), so they will be overridden by any following pseudo-classes that are written beneath it.
So in order for links to behave as you would expect, the pseudo-classes must be written in the LVHFA order:
- :link
- :visited
- :hover
- :focus
- :active
For example, if the :hover rule is above the one for :visited, the hover state will not behave as expected.
MDN Color Contrast Ratio
Color contrast is the contrast between background and foreground colors. Developer tools can be used to observe the color contrast ratio between the text and its background color.
Upon inspecting a text element, you can open the color picker, where you can see the contrast ratio. There is a dropdown arrow that shows what color the text has to be in order to comply with WCAG guidelines. Having a AA rating (minimum contrast ratio) is required, but AAA is preferred.
Why you must meet color contrast ratios
Failure to satisfy minumum contrast ratios can result in legal trouble. There is no escaping a lawsuit if you get caught with insufficient contrast ratios.
It can also be detrimental to the success of the website, legal troubles aside. Traffic to the site and overall brand loyalty can be negatively impacted by bad color choices.
A11Y Guidelines
The Web Accessibility Initiative (WAI) is the group at the W3C that publishes accessibility rules, including the aforementioned Web Content Accessibility Guidelines (WCAG).
Specificity and A11Y Summary
Specificity explains how browsers handle conflicting rules within CSS. The larger that HTML/CSS files get, the more frequently it is that you run into these conflicts, and the more important it is that you understand how specificity works.
Good accessibility practices ensure that your website is able to be used by anybody. Sites that are accessible by anybody is good for everybody. There are guidelines in place to help create the most accessible websites, and failure to comply with these guidelines can be costly.