Selectors are one of the most important aspects of CSS. They are used to target elements in an HTML page so that they can be styled. We will begin our discussion of selectors with the basic selectors: Type, Contextual, Class and ID selectors. As part of this discussion, we will review the distinguishing characteristics of classes and IDs so that you'll get a better understanding when to use a class, and when to use an ID.
Type Selectors
Type selectors will select any HTML element on a page that matches the selector. For example, suppose you want all paragraphs to be styled in blue text, and justified. The rule for this would be:
p {
color: blue;
text-align: justify;
}
Though very simple, even the basic type selector is extremely powerful, as you will see in the weeks to come!
Grouping Selectors
Often, you will create multiple selectors with identical declaration blocks. For example, let's say that you want the H1, P, LI and BLOCKQUOTE tags to be rendered in Arial font if it is present on the computer; if not, alternate fonts will be substituted. For these rules, you would write:
h1 { font-family: arial, geneva, sans-serif; }
p { font-family: arial, geneva, sans-serif; }
li { font-family: arial, geneva, sans-serif; }
blockquote { font-family: arial, geneva, sans-serif; }
If you have several selectors with identical rules, you can save yourself a bit of typing by grouping the selectors. Each selector is listed one after the other, separated by commas. The rule below accomplishes the same effect as the four separate rules above. By grouping the selectors, the style sheet is streamlined, and more efficient.
h1, p, li, blockquote {
font-family: arial, geneva, sans-serif;
}
Elements in grouped selectors are separated by commas.
The benefit of grouping selectors is that modifying a common style is a breeze. In the above example, if you decided that you wanted to change your design so that H1, P, LI and BLOCKQUOTE tags are also displayed in blue, you only need to make the change to one rule, rather than in four separate rules:
h1, p, li, blockquote {
font-family: arial, geneva, sans-serif;
color: blue;
}
Now all H1, P, LI and BLOCKQUOTE tags will display arial, and blue!
Combining Rules
In grouped selectors, many selectors share the same declarations in a single rule. Conversely, any selector can be used in multiple rules. Here's a simple example in which several rules are written for the H1 tag:
h1 { font-family: arial, geneva, sans-serif; }
h1 { color: blue; }
h1 {
font-weight: bold;
text-align: center;
}
Following the above styles, the three rules are combined so that H1 tags are displayed in Arial, blue, bold and centered.
Why would you want to code a selector using multiple rules? In the preceding simple example, you wouldn't. It would be better to keep all the declarations in a single rule. However, it's very useful to use multiple rules if you are grouping selectors, and you want one of the selectors in the list to have a unique property. In this example, we want H3, P, LI and BLOCKQUOTE tags to display in Arial, blue, and left-justified:
h3, p, li, blockquote {
font-family: arial, geneva, sans-serif;
color: blue;
text-align: left;
}
But suppose that we later decided that H3 tags should all be centered. We could separate the rule for H3 tags, and write the code as follows:
p, li, blockquote {
font-family: arial, geneva, sans-serif;
color: blue;
text-align: left;
}
h3 {
font-family: arial, geneva, sans-serif;
color: blue;
text-align: center;
}
But H3 tags still share color and font properties with P, LI and BLOCKQUOTE tags, so this seems rather inefficient (and it is). There is a better way! Write multiple rules for the H3 selector, declaring only the unique property in the second rule.
h3, p, li, blockquote {
font-family: arial, geneva, sans-serif;
color: blue;
text-align: left;
}
h3 { text-align: center; }
In the CSS above, the first rule applies color, font, and left-align properties to the H3,
P, LI and BLOCKQUOTE tags. In the second rule, the text-align:center property is
set for the H3 tag, overriding the text-align:left property in the preceding
rule.
Note that the order of rules for identical selectors is important! The property in the rule "closest" to the targeted tag overrides any identical property values in rules "farther" from the tag. Ostensibly, this means that rules toward the bottom of the style sheet take precedence over rules above them.
Simple rule of thumb: Whenever more than one rule applies to the same element, they will all be applied to the element. If there are conflicting property values, the last one in the style sheet will override all others.
It's actually much more complicated than this, but for this week, use this simple rule of thumb. You'll get the whole story when I explain the complex rules of the Cascade next week. Stay tuned!
In our example above, if the code had been written as follows:
I've moved the 'unique' H3 rule above the grouped rule:
h3 { text-align: center; }
h3, p, li, blockquote {
font-family: arial, geneva, sans-serif;
color: blue;
text-align: left;
}
... H3 tags would be rendered left-justified. This is because the grouped rule specifying
text-align:left
for H3, P, LI and BLOCKQUOTE tags is below the type
rule specifying text-align:center for H3 tags, thus overriding the centered
alignment for H3 tags.
Next, we'll look at one of the most useful selectors in CSS, the contextual selector.