HTML and CSS Reference
Which is the most specific selector? Frequently, the third ( #main #content .item ul li a )
will be assumed, since it targets only a elements within list items in unordered lists, contained
by the #main and #content elements, plus it's the last in the style sheet. However, the first selector
is more specific (because it has an extra class) and the second selector is the most specific of
the bunch thanks to the extra ID. The result is a bold, green link with a yellow background (as
seen in Figure 14-8, though the colors aren't visible in the screen shot). Because location within
the style sheet doesn't affect selectors with different levels of specificity, you can see how rules
scattered throughout a long style sheet can combine to cause trouble. Knowing the rules of
specificity (and playing by them) can save you from having to deal with the effects.
Figure 14-8. Specificity turned this link into an ugly green monster with jaundice.
Wondering why your background image isn't displaying? The first thing to check is the
path in your style sheet—image paths are relative to the location of the style sheet, unless an
absolute URL ( http://mydomain.com/images/my_repeating_texture.jpg ) or a root-relative
path ( /images/my_repeating_texture.jpg ) is used. This means that if your style sheet's
location (relative to the root directory) is /css/main.css , and your background image is
/images/my_repeating_texture.jpg , the following variations will not work:
Instead, you should use one of the following:
Notice the last example is root-relative. This will work no matter where the style sheet is
located within your directory structure, since the root of your site doesn't change (but it will
not work for local testing when opening documents using the file system), as opposed to the
first example ( ../images/ ), which tells the browser to look for the images directory one level
up within the directory structure.