Releasing CSS

Figure 5. The styled elements within the page structure

ID Selectors

ID selectors resemble class selectors. Often they appear in a div, but can be used

elsewhere. To create an ID selector, use the hash (#) and then place a label or name

immediately afterward.

#content {

font-size: .9em;

}

Then add an id attribute with the value of navigation, as shown in Figure 6:

<ul id="navigation">

<li class="warning"><a href="http://csscookbook.com">Apples</a></li>

<li><a href="http://csscookbook.com">Bananas</a></li>

<li><a href="http://csscookbook.com">Cherries</a></li>

</ul>

Releasing CSS 8

Figure 6. The unordered list is styled.

The ID attribute can only appear once in the markup, but the ID selector can

appear multiple times within the CSS.

Descendant Selectors

Descendant selectors are more specific selectors composed of type selectors that

can include class and ID selectors.

Descendant selectors might inherit some property values of type and class

selectors, but due to their specificity can often be found overriding these property

values. They typically have two elements, with the second element being a

descendant of the first, as shown in Figure 7:

li a {

text-decoration: none;

}

Releasing CSS 9

Figure 7. The links within the list items are selected

Pseudo--classes

You may want to add style to items that aren’t based on elements’ names,

attributes, or content. An example of pseudo-classes is shown creating rollover

effects:

a:link {

color: blue;

}

a:visited {

color: purple;

}

a:hover {

color: red;

}

a:active {

color: gray;

}

In this setup, a basic link appears in blue. As soon as the mouse pointer hovers

over the link, it changes to red. During the clicking of the link, the link appears

gray. When returning to the page, the previously visited link appears purple. Three

other pseudo-classes include

:first-child, :focus, and :lang(n).

Pseudo-elements

With most selectors, a developer makes use of elements and their arrangement

within a web document when styling that document.

However, there are times when developers can style an item that’s not marked up

by elements. Developers do this by using pseudo-elements.

Releasing CSS 10

Pseudo-elements consist of :first-letter, :first-line, :before, and

:after.

You can see an example of the pseudo-element

:first-letter in Figure 8:

p:first-letter {

font-size: 200%;

font-weight: bold;

}

Figure 8. The first letter in the paragraph is styled

Or you could use :first-line (as shown in Figure 9) to style the entire first

line. If the first line isn’t a complete sentence or includes the start of a second

sentence,

:first-line still only impacts the first line.

p:first-line {

font-size: 200%;

font-weight: bold;

}

Releasing CSS 11

Figure 9. The first line in the paragraph is styled

IE6 Selector Problems

There are three types of selectors that, unfortunately, IE 6 omitted: child selectors,

adjacent sibling, and attribute selectors.

Child Selectors

A child selector means that an element is styled if it is the direct descendant of its

parent element. A child selector is signified by a right-angled bracket (>) as shown

below:

p > strong {

text-decoration: underline;

}

Only the strong element that isn’t contained within another element (the p element

in this case) is styled, as shown in Figure 10:

<div>

<p>Nothing happens to this part of the sentence because this

<strong>strong</strong> isn't the direct child of div.</p>

However, this <strong>strong</strong> is the child of div.

Therefore, it receives the style dictated in the CSS rule.

</div>

Releasing CSS 12