css 101

Refining Selectors

So far we've been working with rulesets that look like this:

In other words, we've created rules that apply either to a single HTML tag, or to anything that matches a custom selector name. But we actually have even more control than that -- you can easily broaden or narrow the "scope" of elements your rulesets apply to.

Broadening the Scope of Rulesets

What if we wanted that default p style to apply to both paragraphs and blockquotes? We could duplicate the rule, but that would stink because then any time we modified one we'd have to remember to modify the other as well. CSS solves this problem by letting you list a whole set of selectors for a given rule, like this:

Now the rules in the set will apply equally to paragraphs, ordered and unordered lists, and blockquotes. Of course, if you want to set some basic rules that will apply to your entire document, there's an easier way -- just use the HTML <body> tag as your selector:

Since all visible elements in a document fall inside the opening and closing <body> tags, these rules will apply to everything on the page. And since the cascade favors the specific over the general, you can easily override any rule on a per-selector basis. For example:

Even though you've defined a color for the entire document, and your blockquotes fall inside that document, blockquotes will be rendered with a pink font. The cascade says that even though everything on the page is black by default, blockquotes are effectively treated like an exception.

Narrowing the Scope of Rulesets

Let's look at the opposite situation. Earlier, you created the class .alert, which applied to anything on the page with class="alert". But maybe you want to be more specific than that. Maybe you only want those rules to apply to paragraphs in that class, but not to blockquotes in that class. This is done like this:

The rule above would not be invoked for standard paragraphs, nor would it be invoked for blockquotes with a class of "alert." It would only be invoked for paragraphs with a class of "alert." This "narrowing" approach can be used for IDs as well as classes:

The above rule would be invoked only for an instance of <p id="alert">.

You can also narrow the scope of rulesets by referring to the way HTML tags are nested within one another. This is best understood through a practical example you're likely to encounter. Let's say you've defined your body background color to be white, and your link color to be gray. But let's also say you have a rule that says paragraphs with a class of "alert" have a gray background. Unfortunately, any links appearing in those paragraphs are going to be invisible, since they'll be gray on gray. You need the ability to say "Any links found inside of a paragraph with class "alert" should be white." Here's how you'd do it:

Compare the following two paragraphs. The top one is "normal," while the bottom one has class "alert". Both paragraphs contain links, but the links are displayed with different colors.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate ...

The key to making this work is the bolded part above. The rule says, "If any <a> tag is found within a paragraph of class "alert," use these style rules instead." The nesting reads from outer to inner (the "a" tag is within the "p" tag). Nesting can go as many levels deep as necessary. Creating rules that specifically address nested elements may seem tricky, but this real-world scenario comes up often, so make sure you understand the syntax.