CSS: Implement of Out-Class and ID Selectors

By Richard York

Implement of 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:

2. Save the preceding document as Example_3-1.html.
3. Enter the following style sheet into your text editor:
   
   2. 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 Works
      In 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 four
      elements, 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
      elements.
      
      
      Since the preceding rule applied to all four
      elements, 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 next
      element 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 four
      elements 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 the
      element 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 fourth
      element, 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.