Selectors | Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day (5th Edition)

You've already seen one type of selector for CSSelement names. Any tag can serve as a CSS selector, and the rules for that selector will be applied to all instances of that tag on the page. You can add a rule to the <b> tag that sets the font weight to normal if you choose to do so, or italicize every paragraph on your page by applying a style to the <p> tag. Applying styles to the <body> tag using the body selector enables you to apply pagewide settings. However, there are also a number of ways to apply styles on a more granular basis and to apply them across multiple types of elements using a single selector.

Let's say that you want all unordered lists, ordered lists, and paragraphs on a page to be displayed using blue text. Rather than writing individual rules for each of these elements, you can write a single rule that applies to all of them. Here's the syntax:

p, ol, ul { color: blue }

A comma-separated list indicates that the style rule should apply to all the tags listed. The preceding rule is just an easier way to write

p { color: blue } ol { color: blue } ul { color: blue }

Contextual Selectors

There are also contextual selectors available. These are used to apply styles to elements only when they're nested within other specified elements. Take a look at this rule:

p ol { color: blue }

The fact that I left out the comma indicates that this rule applies only to ol elements that are nested within p elements. Let's look at two slightly different rules:

p cite { font-style: italic; font-weight: normal } li cite { font-style: normal; font-weight: bold }

In this case, <cite> tags that appear within <p> tags will be italicized. If a <cite> tag appears inside a list item, the contents will be rendered in boldface. Let's add in one more rule:

cite { color: green } p cite { font-style: italic; font-weight: normal } li cite { font-style: normal; font-weight: bold }

In this case, we have one rule that applies to all <cite> tags, and the two others that you've already seen. In this case, the contents of all <cite> tags will be green, and the appropriately nested <cite> tags will take on those styles as well. Here's one final example:

cite { color: green } p cite { font-style: italic; font-weight: normal; color: red } li cite { font-style: normal; font-weight: bold; color: blue }

In this case, the nested styles override the default style for the <cite> tag. The contents of <cite> tags that don't meet the criteria of the nested rules will appear in green. The nested rules will override the color specified in the less-specific rule, so for <cite> tags that are inside <p> tags, the contents will be red. Inside list items, the contents will be blue.

Classes and IDs

Sometimes selecting by tag (even using contextual selectors) isn't specific enough for your needs, and you must create your own classifications for use with CSS. There are two attributes supported by all HTML tags: class and id. The class attribute is for assigning elements to groups of tags, and the id attribute is for assigning identifiers to specific elements.

To differentiate between classes and regular element names in your rules, you prepend . to the class name. So, if you have a tag like this

<div >Some text.</div>

then you write the rule like this

.important { color: red; font-weight: bold; }

Any element with its class set to important will appear in bold red text. If you want to give this treatment to only important <div>s, you can include the element name along with the class name in your rule.

div.important { color: red; font-weight: bold; } p.important { color: blue; font-weight: bold; }

In this case, if a <p> tag is assigned to the important class, the text inside will be blue. If a <div> is in the important class, its text will be red. You could also rewrite the preceding two rules as follows:

.important { font-weight: bold; } div.important { color: red; } p.important { color: blue; }

All members of the important class will be bold and important <div>s will be red, whereas important paragraphs will be blue. If you put a list in the important class, the default color would be applied to it.

Whenever you want to specify styles for one element in a style sheet, assign it an ID. As you'll learn later in the book, assigning IDs to elements is also very useful when using JavaScript or dynamic HTML because doing so lets you write programs that reference individual items specifically. For now, though, let's look at how IDs are used with CSS. Generally, a page will have only one footer. To identify it, use the id attribute:

<div > Copyright 2003, Example Industries. </div>

You can then write CSS rules that apply to that element by referencing the ID. Here's an example:

#footer { font-size: small; }

As you can see, when you refer to IDs in your style sheets, you need to prepend a # on the front in order to distinguish them from class names and element names. Note that there's no additional facility for referring to IDs that are associated with particular elements. IDs are supposed to be unique, so there's no need for qualifying them further. Finally, there's nothing to say that you can't mix up all of these selectors in one rule, like so:

h1, #headline, .heading, div.important { font-size: large; color: green; }

As you can see, I've included several types of selectors in one rule. This is perfectly legal if you want to set the same properties for a number of different selectors. Classes also work with contextual selectors:

ul li.important { color: red }

In this case, list items in the important class will be red if they occur in an unordered list. If they're in an ordered list, the rule will not be applied.