Cheatsheet: CSS

CSS selectors

Tag Selectors

div { width: 100px; }

Class Selector:

.class-name { height: 100px; }

ID Selector:

#id-name { property: value; }

Multiple Selectors:

div, span, .class-name { property: value; }

Descendant Selector:

table tr { property: value; }

Child Selector:

div > span { property: value; }

Adjacent Sibling Selector:

div + span { property: value; }

General Sibling Selector:

div ~ span { property: value; }

Attribute Selector:

form[name=addressForm] { property: value; }

Pseudo-classes:

button:hover { property: value; }

Pseudo-elements:

element::pseudo-element { property: value; }

Units:

property: valuepx; /* pixels */
property: value%; /* percent */
property: valueem; /* ems */