The Importance of Specificity in CSS.
When it comes to styling elements on a webpage, specificity plays a crucial role. In CSS, IDs are more specific than classes, and classes are more specific than elements.
For example, the selector #footer a targets an element (a) within an ID (#footer). However, if you try using footer a, which selects two elements, it may not work as expected because it has lower specificity. In this case, styles applied by a:link will take precedence since it has higher specificity due to being both an element and a (pseudo)class.
To increase the specificity of the footer a declaration, you can add a class or an ID to the footer element, or use a selector like footer a:visited. The key rule to remember is that IDs override classes, which, in turn, override elements. Inline styles and !important declarations are even more specific, surpassing IDs.
Calculating specificity involves counting the number of IDs, classes, and elements in a 0,0,0 notation. For instance, #footer a would be 1,0,1, while a:link is 0,1,1, and footer a is 0,0,2 when prioritized from highest to lowest specificity.
To make footer a more specific than a:link, you need to introduce at least one class or ID in the selector. Resources such as CSS Tricks, Smashing Magazine, MDN, and Nettuts provide helpful insights into understanding CSS specificity in greater depth.