Pro HTML5 and CSS3 Design Patterns

CHAPTER 3 CSS SELECTORS AND INHERITANCE

li:first-child { font-weight:bold; color:red; } / First-child Selector /
li:last-child { font-weight:bold; color:red; } / Last-child Selector /
ul li:first-of-type {color: red} / First-of-type Selector /
tr > td:last-of-type / Last-of-type Selector /
li:only-child / Only-child Selector /
div:only-of-type / Only-of-type Selector /
p:empty {display: hidden} / Empty Selector /
li + li { font-style:italic; color:blue; } / Sibling Selector /

Position and Group Selectors

Problem

You want to combine selectors to narrow a selection based on element position. In other words, you want

to select elements based on whether they are descendants, children, or siblings of other elements. You also

want to apply different selectors to the same set of rules.

Solution

Combine selectors as follows:

To apply different selectors to the same group of rules, chain together multiple selectors using a

comma. This is the group selector. Each selector in the chain is independently assigned to the same set of

styles.

To select descendant elements, chain together multiple selectors using whitespace. Whitespace is the

descendant selector. Each descendant selector narrows the selection to descendants of the previous

selector. A descendant can be a child, a grandchild, a great-grandchild, and so forth.

To select child elements, chain together multiple selectors using the greater-than sign. This is the child

selector. Each child selector narrows the selection to elements that are children of the previous selector.

To select the first child element, append :first-child to any selector. This is the first-child selector.

This limits the selector only to elements that are the first child of their parents. Similarly you can use rules

like :nth-child, :nth-last-child, etc. to specify the exact position of the element.

To select sibling elements, chain together multiple selectors using the plus sign. This is the sibling

selector. Each sibling selector narrows the selection to elements that are siblings to the elements chosen

by the previous selector.

Patterns CSS

selector, selector, etc { STYLES }

or selector selector etc { STYLES }

or selector > selector > etc { STYLES }

or selector + selector + etc { STYLES }

or selector:first-child { STYLES }

Similar with the rest of the pseudo-classes

Location These design patterns apply to all elements.^

Limitations Only the group and descendant selectors work in Internet Explorer 6. All these selectors work in Internet
Explorer 7 and the other major browsers.

Example The group selector p,ol,li applies the same set of styles to all paragraphs, ordered lists, and list items.
The selector div *.my-class selects all elements assigned to my-class that descend from a division.
Only the paragraph in the third list item matches this selector. The selector #my-id p selects all
paragraphs descending from