Out-Class and ID Selectors
Example 3-1. To see how class and id selectors work, follow these steps.
Enter the following markup into your text editor:
- Save the preceding document as Example_3-1.html.
- Enter the following style sheet into your text editor:
- Save the preceding style sheet as Example_3-1.css. Figure 3-11 shows what Example 3-1 looks like when rendered in Safari. You should see something similar in Firefox, IE 6, IE 7, and Opera.How It WorksIn Example 3-1, you put your newly acquired class and id selector skills to use. The following is a rule-by-rule review of the relevant class and id styles you applied in Example_3-1.css.First, you created a rule that is applied to all fourelements, since all four
elements have a class name of container. You were able to select all four elements because each
element in the document has a container class name in the value of the class attribute that appears on all four
Since the preceding rule applied to all fourelements, it set common properties such as dimensions using the width, height, padding, border, and margin properties. just examine how the p.container selector is working to select the elements, rather than the actual styling being applied.
In the next rule, you selected the nextelement that also has two class names, box and container.
Although you could have chained the class names in the style sheet by using the selector p.container .box, you avoid doing this since there are known problems with this approach in IE 6. IE 6, on the other hand, supports just fine multiple class names in the class attribute. Referencing just the box class name allows you to select the element, too. You give the element a slightly richer shade of light blue, and a slightly lighter green border than was specified in the previous rule, which referenced all fourelements by the class name, container. You see that the background and border declarations set here overrode the previously set background and border declarations in the first container rule
In the next rule, you set properties on theelement with both the class names container and tank. Again, you gave the element an even richer light blue background (compared to the last rule, which was applied to the
element with container and box class names).
In the last rule, you used an id selector to select the fourthelement, which has an id attribute set with a value of container-1234. For the fourth
element, there is an even richer still light blue background, and an even lighter green border around it.