Statements

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

Selectors

Type

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

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 subset
.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

Link

a[:<link, visited, hover, active, focus>] {}
...
<a href="..."> ... </a>
  • a - any link
Pseudo-classes
  • 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

Descendant

parent-selector child-selector {}
...
<parent-element ...> <child-element ...> ... </child-element> </parent-element>

Universal

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

Child

elem1 > elem2
  • Where elem1 is the direct parent of elem2
  • Not supported: IE6

Adjacent

elem1 + elem2
  • Where both elements have the same direct parent and are next to one another in the DOM tree
  • Not supported: IE6

Pseudo classes

elem:pseudo_class {}
                            Browsers not supported
                            ----------------------
:not(...)                   IE8
:empty                      IE8, FF2, Safari 3.0

:checked                    IE8
:enabled                    IE8
:disabled                   IE8

:first-child                IE6
:last-child                 IE8
:nth-child(...)             FF3.0, IE8

:first-of-type              IE, FF
:last-of-type               IE, FF
:nth-of-type(...)           FF3.0, IE8

:before                     IE7
:after                      IE7
nth values: odd,even,2n,3n,2n+3,4,...
Examples
a:hover {}
div:not(.myClass)

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"] {...}

!important

property:value !important;
  • Gives the style a higher priority than one without !important