Perhaps the most commonly used selector is the type selector, though most people think of it
as a tag name or element selector. This selector chooses content based on the name of the
element. For example, the following code in Listing 3 changes the size of any text within a table data
td) element, as shown in Figure 3:
This style applies to any text within a table data element, no matter where it is in the hierarchy of the page.
After type selectors, the most commonly used selectors are class selectors. A class
selector selects all elements that have a
with a particular value. Preceding the name of the class with a period (
signals to the browser that this is a class selector. For example, the following code in Listing 4
bolds any text that is in the
Classes are an excellent way to increase the maintainability of Web pages, because wholesale changes can be made to the look and feel of a site with just a change to the stylesheet. Classes make it possible to discriminate based on logical or business criteria, rather than simply by an accident of layout. For example, you might create a class that allows you to set all person names to a particular style.
In some cases, you might find it useful to further restrict a class-based rule based on the element to which the class is attached. You can accomplish this task by appending the class name to the element name. For example, category names within a table data cell can be set to italics as shown in Listing 5.Listing 5. Restricting a class based on element
Because the text "
Best In Show" is outside a table data element,
the new rule doesn't apply, as shown in Figure 4.