Eric A. Meye - Selectors, Specificity, and the Cascade

Please address comments and questions concerning this book to the publisher:

We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at http://oreil.ly/selector-specificity-cascade.

To comment or ask technical questions about this book, send email to .

For more information about our books, courses, conferences, and news, see our website at http://www.oreilly.com.

Find us on Facebook: http://facebook.com/oreilly

Follow us on Twitter: http://twitter.com/oreillymedia

Watch us on YouTube: http://www.youtube.com/oreillymedia

One of the primary advantages of CSSparticularly to designersis its ability to easily apply a set of styles to all elements of the same type. Unimpressed? Consider this: by editing a single line of CSS, you can change the colors of all your headings. Dont like the blue youre using? Change that one line of code, and they can all be purple, yellow, maroon, or any other color you desire. That lets you, the designer, focus on design, rather than grunt work. The next time youre in a meeting and someone wants to see headings with a different shade of green, just edit your style and hit Reload. Voil! The results are accomplished in seconds and there for everyone to see.

Of course, CSS cant solve all your problemsyou cant use it to change the colorspace of your PNGs, for example, at least not yetbut it can make some global changes much easier. So lets begin with selectors and structure.

Basic Style Rules

As stated, a central feature of CSS is its ability to apply certain rules to an entire set of element types in a document. For example, lets say that you want to make the text of all h2 elements appear gray. Using old-school HTML, youd have to do this by inserting ... tags in all your h2 elements:

This is h2 text

Obviously, this is a tedious process if your document contains a lot of h2 elements. Worse, if you later decide that you want all those h2s to be green instead of gray, youd have to start the manual tagging all over again. (Yes, this is really how it used to be done!)

CSS allows you to create rules that are simple to change, edit, and apply to all the text elements you define (the next section will explain how these rules work). For example, simply write this rule once to make all your h2 elements gray:

h2 {color: gray;}

If you want to change all h2 text to another colorsay, silversimply alter the value:

h2 {color: silver;}

Element Selectors

An element selector is most often an HTML element, but not always. For example, if a CSS file contains styles for an XML document, element selectors might look something like this:

QUOTE {color: gray;}BIB {color: red;}BOOKTITLE {color: purple;}MYElement {color: red;}

In other words, the elements of the document serve as the most basic selectors. In XML, a selector could be anything, since XML allows for the creation of new markup languages that can have just about anything as an element name. If youre styling an HTML document, on the other hand, the selector will generally be one of the many HTML elements such as p, h3, em, a, or even html itself. For example:

html {color: black;}h1 {color: gray;}h2 {color: silver;}

The results of this style sheet are shown in .

Figure 1-1. Simple styling of a simple document

Once youve globally applied styles directly to elements, you can shift those styles from one element to another. Lets say you decide that the paragraph text, not the