Using Basic Selectors - Beginning CSS3 - page 35

a /* specificity 1 or 0, 0, 0, 1 */
a:link /* specificity 11 or 0, 0, 1, 1 */
#nav a:link /* specificity 111 or 0, 1, 1, 1 */
p.intro:first-line /* specificity 12 or 0, 0, 1, 2 */

When you see both formulas alongside each other like this, it becomes obvious that the values are the same
if you remove the commas from the CSS2.1 formula.
Selectors that are grouped together to apply the same styles to different elements are counted separately. For
example, h1, h2, h3 has a specificity of 1, not 3.
If two rules define different values for the same property, the selector with the higher specificity wins
regardless of which order the rules appear in the style sheet. If both selectors have the same specificity, the one
lower down the style sheet takes precedence.

Not ■ Conflicts apply to individual properties, not to the whole style block.

For example, basic_05.css in the ch02/end/css folder contains the following styles for links:
a:link { /* specificity 11 */
color: #8D0E6B;
}
#nav a:link, #nav a:visited { /* specificity 111 */
color: #63550A;
}

Both style rules set the text color for links. The second one takes precedence not only because it's lower
down the style sheet, but also because it has higher specificity. Try reversing the order of the rules like this:
#nav a:link, #nav a:visited { /* specificity 111 */
color: #63550A;
}
a:link { /* specificity 11 */
color: #8D0E6B;
}

Even though #nav a:link is now higher in the style sheet, it still takes precedence because of its higher specificity.
But the selector targets only links in the nav unordered list, so it doesn't affect the other link in the main text.
The concept of specificity can be difficult to grasp. Fortunately, it comes into play only when there's a conflict
between styles targeting similar elements. Much of the time, you can forget about it. But when a style isn't applied
where you expect it to be, the answer almost always lies in a more specific rule—in other words, one with higher
specificity—taking precedence. Using a browser's developer tools to inspect which styles are being applied to an
element usually helps trace the source of the problem.

Summary
This chapter has covered a lot of ground, introducing 16 basic selectors and showing how they can be combined
to target styles more precisely. Many beginners tend to rely heavily on classes to apply styles to page elements,
but classes have the disadvantage of requiring extra markup in your HTML. As the exercises demonstrated, you
can achieve a great deal through the use of type and descendant selectors. You learned how to apply different
styles to links depending on the ID of their ancestor. Choosing the right selector for the job isn't always easy, but
you should be guided by the principle of using the simplest selector possible. It not only makes your work much
simpler, but it also makes it easier for the browser, resulting in pages that load quickly and are more responsive.
In the next chapter, you'll learn how to specify sizes, colors, and the location of files, laying the foundation
for a deeper exploration of CSS.