Element selectors select all instances of a given HTML element. The example CSS rules in Figure 4.2 illustrate two element selectors. You can also select all elements by using the universal element selector, which is the * (asterisk) character.

You can select a group of elements by separating the different element names with commas. This is a sensible way to reduce the size and complexity of your CSS files by combining multiple identical rules into a single rule. An example grouped selector is shown in Listing 4.4, along with its equivalent as three separate rules.

/* commas allow you to group selectors */ 
p, div, aside { 
   margin: 0; 
   padding: 0; 
} 
/* the above single grouped selector is equivalent to the following: */ 
p { 
   margin: 0; 
   padding: 0; 
} 
div { 
   margin: 0; 
   padding: 0; 
} 
aside { 
   margin: 0; 
   padding: 0; 
}

A class selector allows you to simultaneously target different HTML elements regardless of their position in the document tree. If a series of HTML elements have been labeled with the same class attribute value, then you can target them for styling by using a class selector, which takes the form: period (.) followed by the class name.

Figure 4.4 illustrates the use of a class selector. Notice that an element can be tagged with multiple classes. In Figure 4.4, both the orange and circle classes are assigned to the second last <div> element.

Figure 4.4 Id and class selector example

html, body, div, span, h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

An id selector allows you to target a specific element by its id attribute regardless of its type or position. If an HTML element has been labeled with an id attribute, then you can target it for styling by using an id selector, which takes the form: pound/hash (#) followed by the id name. Figure 4.4 illustrates the use of an id selector.

An attribute selector provides a way to select HTML elements either by the presence of an element attribute or by the value of an attribute. This can be a very powerful technique, but because of uneven support by some of the browsers in the past, not all web authors have used them.

Attribute selectors can be a very helpful technique in the styling of hyperlinks and form elements. In the next chapter, you will learn the HTML for constructing forms. Many of the different form widgets, such as text boxes, radio buttons, and password fields, are all constructed from the same <input> element. You use the type attribute to indicate which form widget you want. You typically will want to style the different widgets in quite different ways; the attribute selector provides a common way to achieve this goal. Figure 4.5 illustrates two different uses of attribute selectors: the first to style form elements and the second to style links to PDF files differently than other links.

Figure 4.5 Attribute selector example

Table 4.4 summarizes some of the most common ways one can construct attribute selectors in CSS.

A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree but which is still a recognizable selectable object. For instance, you can select the first line or first letter of any HTML element using a pseudo-element selector. A pseudo-class selector does apply to an HTML element but targets either a particular state or a variety of family relationships. Table 4.5 lists some of the more common pseudo-class and pseudo-element selectors.

The most common use of this type of selectors is for targeting link states and for adding hover styling for other elements. By default, the browser displays link text blue and visited text links purple. Figure 4.6 illustrates the use of pseudo-class selectors to style hover behavior and the appearance of links. Do be aware that hover state does not occur on touch screen devices. Note the syntax of pseudo-class selectors: the colon (:) followed by the pseudo-class selector name. Do be aware that a space is not allowed after the colon.

Figure 4.6 Styling a link using pseudo-class selectors

Believe it or not, the order of these pseudo-class elements is important. The :link and :visited pseudo-classes should appear before the others. Some developers use a mnemonic to help them remember the order. My favorite is “Lord Vader, Former Handle Anakin” for Link, Visited, Focus, Hover, Active.

A contextual selector (in CSS3 also called combinators) allows you to select elements based on their ancestors, descendants, or siblings. That is, it selects elements based on their context or their relation to other elements in the document tree. While some of these contextual selectors are used relatively infrequently, almost all web authors find themselves using descendant selectors.

A descendant selector matches all elements that are contained within another element. The character used to indicate descendant selection is the space character. Figure 4.7 illustrates the syntax and usage of the syntax of the descendant selector.

Figure 4.7 Syntax of a descendant selection

Table 4.6 describes the other contextual selectors.

Figure 4.8 illustrates some sample uses of a variety of different contextual selectors. An interesting question about the selectors in Figure 4.8 is, “What will be the color of the first <time> element?” Will it be red or purple (since it is targeted by two different selectors)? It will, in fact, be purple. The reason why (because it has a higher specificity) will be covered in the next section.

Figure 4.8 Contextual selectors in action

div#main div time, footer ul li { color: red; }

div#main div time { color: red; }
footer ul li { color: red; }