Statements

selector [, selector]*  { [property: value;]* }

Simple selectors

Type

element {}
...
<element> ... </element>

Universal

* {}

• Matches any element (in the example above, it matches any element in the page)

Class

[element].name {}
...
<element class="name"> ... </element>

• A class can be used by more than one HTML element
• If an element has multiple classes, their names must be separated by white space

<element class="name1 name2"> ... </element>

Class chaining

.name1.name2 {...}

• Matches any element with a class attribute that contains both "name1" and "name2" (i.e. class="name1 namex name2")
• IE6 (and IE7 in Quirks mode) only recognizes the last class in the chain

Id

[element]#name {}
...
<element id="name"> ... </element>

• Each id can only be used by one HTML element

Attribute

• Not supported by IE6, or by IE7 in Quirks mode
• Quotes are optional for attribute values

/* All input elements with a type attribute */
input[type] {...}

/* All elements with a type attribute */
*[type] {...}

/* All input elements with a type attribute with a value of "val" */
input[type="val"] {...}

/* All elements with a type attribute whose value begins with the prefix "val" */
[type^="val"] {...}

/* All elements with a type attribute whose value ends with the suffix "val" */
[type$="val"] {...}

/* All elements with a type attribute whose value contains at least one instance of the substring "val" */
[type*="val"] {...}

/* All input elements with a type attribute with a space-separated list of words, one of which is "val" */
input[type~="val"] {...}

/* All input elements with a type attribute with a hyphen-separated list of words that starts with "val" */
input[type|="val"] {...}

Pseudo-classes

elem:pseudo-class {}

Dynamic

a[:<link, visited, hover, active, focus>] {}
...
<a href="..."> ... </a>

• a - any link

• a:link - unvisited link
• a:visited - visited link
• a:hover - mouse over link
• a:active - selected link (a link the user has currently clicked on)

• a:focus - when a hyperlink is selected (i.e. tabbing through a page)

a:focus {outline:none;}

Usage

• a:hover must be defined after a:link and a:visited
• a:active must be defined after a:hover
• Safe order - a:link, a:visited, a:hover, a:active    (LVHA)   (LoVe/HAte)

a
----------
a:link
a:visited
----------
a:hover
----------
a:active

• When all four a:* are defined, the value for "a" is overridden in all cases
• When none of them are defined, the value for "a" is used in all cases

• If a:hover has been defined (in the right order), then a:link and a:visited will only apply when the mouse is not over the link

UI element states

                            Browsers not supported
                            ----------------------
:enabled                    IE8
:disabled                   IE8

:checked                    (only supported by Opera)
:indeterminate              ?                  (neither checked nor unchecked)

Structural

                            Browsers not supported
                            ----------------------
:first-child                IE6         (IE7/8 support is buggy)
:last-child                 IE8
:nth-child(...)             IE8         (1-based)
:nth-last-child(...)        IE8

:first-of-type              IE8
:last-of-type               IE8
:nth-of-type(...)           IE8         (1-based)
:nth-last-of-type(...)      IE8

:root                       IE8
:empty                      IE8

:only-child                 IE8
:only-of-type               IE8

nth values: odd,even,2n,3n,2n+3,4,...          (1-based)

Examples

a:nth-child(2) {}

Negation

                            Browsers not supported
                            ----------------------
:not(...)                   IE8

• :not cannot be nested
• Only simple selectors can be used within :not

Examples

div:not(.myClass)
div:not(.myClass):not(#myId)

Combinators

Descendant

elem1 elem2

• Select elem2, where elem1 is an ancestor of elem2

Child

elem1 > elem2

• Select elem2, where elem1 is the parent of elem2
• Not supported: IE6

Adjacent sibling

elem1 + elem2

• Select elem2, where both elements have the same parent and elem1 immediately precedes elem2
• Not supported: IE6

General sibling

elem1 ~ elem2

• Select elem2, where both elements have the same parent and elem1 precedes (not necessarily immediately) elem2
• Not supported: IE6

Pseudo-elements

                            Browsers not supported
                            ----------------------
:before                     IE7
:after                      IE7

:first-line
:first-letter

!important

property:value !important;

• Gives the style a higher priority than one without !important