Making sense of CSS - Build Windows 8 Apps with HTML5 and JavaScript - page 69

Selector Description

Elements that contain an attribute with the specified name whose value is
different from the specified value.

[attribute != value]

Elements that contain an attribute with the specified name whose value begins
with the specified value.

[attribute ^= value]

Elements that contain an attribute with the specified name whose value ends with
the specified value.

[attribute $= value]

Pseudo-classes for retrieving child elements
Sometimes you just want to pick up some child elements of a given selector. The first-child pseudo
class returns the first child element, whereas last-child returns the last one. In addition, you can pick
up the n th child of a given element using the nth-child(n) class, where n indicates the index of the
child element to select.

Compound selectors
As you may have guessed, in CSS selectors can be composed together to form queries of any
reasonable complexity. You can concatenate selectors using a blank, the comma, or other ad hoc
symbols to define queries. Table 3-2 illustrates the most common scenarios.

TABLE 3-2 Popular compound selectors

Selector Example Description

element element Selects all A elements contained in a DIV elements. div a

element, element Selects all DIV elements and all P elements. div,p

element > element Selects all A elements directly children of a DIV element. div > a

element + element Selects all A elements placed immediately after a DIV element.

div + a

In addition, consider the following example:

div.headline a {
...
}

The div.headline expression indicates all DIV elements given a CSS class named headline. The
following a just restricts the query to all A elements contained within any subtree rooted in a DIV
element with a class of headline .

Note When it comes to classes and pseudo-classes, names are case-insensitive.