Css Cheat Sheet

Element selectors

Element -- selects all h2 elements on the page

h2 { foo: bar; }

Group -- selects all h1, h2 and h3 elements on the page

h1, h2, h3 { foo: bar; }

Class and ID selectors

Class -- selects all elements with class attribute containing foo or only p elements with that class

.foo { bar: fum; }

ID -- selects the element with 'baz' id attribute value

#foo { bar: fum; }

Contextual selectors

Descendant -- selects all p elements within the infinite-level hierarchy of element #foo descendants

#foo p { bar: fum; }

Adjacent sibling -- selects the sibling element p that is immediately next to h2 element

h2 + p { foo: bar; }

Child -- selects all p elements that are immediate children of #foo element

#foo > p { bar: fum; }

General sibling -- selects all elements p that are siblings to the h2 element

#foo > p { bar: fum; }

Pseudo-class selectors

Unvisited link -- applies to link elements that have not been visited

a:link { foo: bar; }

Visited link -- applies to link elements that have been visited

a:visited { foo: bar; }

Focus state -- applies to selected .foo element that is ready for input

.foo:focus { bar: fum; }

Hover state -- applies when mouse pointer is over the .foo element

.foo:hover { bar: fum; }

Active state -- applies when .foo element is in process of being clicked

.foo:active { bar: fum; }