Designing a Web Page with CSS - HTML, CSS, and Dynamic HTML - page 203

Structural pseudo-classes are used to classify items based on their locations within the
hierarchy of page elements. For example, the style rule

body:first-child {background-color: yellow;}
changes the background color to yellow in the fi rst child of the body element within
the document. Notice that the selector does not specify the element. It could be an h1
heading, a section element, or anything else, as long as it is the fi rst child of the body
element. Figure 3-54 describes the structural pseudo-classes.

Figure 3-54 Structural pseudo-classes

Pseudo-Class Matches

root

The top element in the document hierarchy (the html element)

empty

An element with no children

only-child

An element with no siblings

first-child

The first child of the parent element

last-child

The last child of the parent element

li:first-of-type

The first element of the parent that matches the specified type

last-of-type

The last element of the parent that matches the specified type

nth-of-type( n )

The n th element of the parent of the specified type

The n th from the last element of the parent of the specified type

nth-last-of-type( n )

only-of-type

An element that has no siblings of the same type

lang( code )

The element that has the specified language indicated by code

not( s )

An element not matching the specified selector, s

The fi rst entry in a navigation list is often the most prominent or important. On the
Sunny Acres Web site, the fi rst entry is linked to the site's home page. Tammy would like
this link to always be displayed in capital letters. Although you could edit the HTML
code to make this happen, you decide to make this change to the style sheet using the
following style rule because you want to separate content from design:

nav ul li:first-of-type {
text-transform: uppercase;
}

The style rule uses the li:first-of-type pseudo-class to apply the uppercase transfor-
mation to the fi rst li element found nested within the navigation list. You'll add this rule
now to your style sheet.

To transform the text of the first navigation list element:

◗

1. Return to the sa_styles.css file in your text editor.
◗

2. Add the following style rule as shown in Figure 3-55:

For browsers that don't
support the first-of-
type pseudo-class, you
can use the id attribute
to mark the first list item
and write the style based
on that id.

nav ul li:first-of-type {
text-transform: uppercase;
}