CSS cheatsheet

Basics

Selectors

.class {
  font-weight: bold;
}

Selector	Description
`*`	All elements
`div`	Element
`.class`	Class
`#id`	ID
`[disabled]`	Attribute
`[role="dialog"]`	Attribute

Combinators

Selector	Description
`.parent .child`	Descendant
`.parent > .child`	Direct descendant
`.child + .sibling`	Adjacent sibling
`.child ~ .sibling`	Far sibling
`.class1.class2`	Have both classes

Attribute selectors

Selector	Description
`[role="dialog"]`	`=` Exact
`[class~="box"]`	`~=` Has word
`[class\|="box"]`	`\|=` Exact or prefix (eg, `value-`)
`[href$=".doc"]`	`$=` Ends in
`[href^="/index"]`	`^=` Begins with
`[class*="-is-"]`	`*=` Contains

Pseudo-classes

Selector	Description
`:target`	eg, `h2#foo:target`
`:disabled`
`:focus`
`:active`
`:nth-child(3)`	3rd child
`:nth-child(3n+2)`	2nd child in groups of 3
`:nth-child(-n+4)`
`:nth-last-child(2)`
`:nth-of-type(2)`
`:checked`	Checked inputs
`:disabled`	Disabled elements
`:default`	Default element in a group
`:empty`	Elements without children

Pseudo-class variations

Selector
`:first-of-type`
`:last-of-type`
`:nth-of-type(2)`
`:only-of-type`
`:first-child`
`:last-child`
`:nth-child(2)`
`:only-child`

Fonts

Properties

Property	Description
`font-family:`	`<font>, <fontN>`
`font-size:`	`<size>`
`letter-spacing:`	`<size>`
`line-height:`	`<number>`
`font-weight:`	`bold` `normal`
`font-style:`	`italic` `normal`
`text-decoration:`	`underline` `none`
`text-align:`	`left` `right` `center` `justify`
`text-transform:`	`capitalize` `uppercase` `lowercase`

Shorthand

	style	weight	size (required)		line-height	family
`font:`	`italic`	`400`	`14px`	`/`	`1.5`	`sans-serif`
	style	weight	size (required)		line-height	family (required)

Example

font-family: Arial;
font-size: 12pt;
line-height: 1.5;
letter-spacing: 0.02em;
color: #aa3322;

Case

text-transform: capitalize; /* Hello */
text-transform: uppercase; /* HELLO */
text-transform: lowercase; /* hello */

Background

Properties

Property	Description
`background:`	(Shorthand)
`background-color:`	`<color>`
`background-image:`	`url(...)`
`background-position:`	`left/center/right` `top/center/bottom`
`background-size:`	`cover` `X Y`
`background-clip:`	`border-box` `padding-box` `content-box`
`background-repeat:`	`no-repeat` `repeat-x` `repeat-y`
`background-attachment:`	`scroll` `fixed` `local`

Shorthand

	color	image	positionX	positionY		size	repeat	attachment
`background:`	`#ff0`	`url(bg.jpg)`	`left`	`top`	`/`	`100px` `auto`	`no-repeat`	`fixed;`
`background:`	`#abc`	`url(bg.png)`	`center`	`center`	`/`	`cover`	`repeat-x`	`local;`
	color	image	positionX	positionY		size	repeat	attachment

Multiple backgrounds

background: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
  url('background.jpg') center center / cover, #333;

Animation

Properties

Property	Value
`animation:`	(shorthand)
`animation-name:`	`<name>`
`animation-duration:`	`<time>ms`
`animation-timing-function:`	`ease` `linear` `ease-in` `ease-out` `ease-in-out`
`animation-delay:`	`<time>ms`
`animation-iteration-count:`	`infinite` `<number>`
`animation-direction:`	`normal` `reverse` `alternate` `alternate-reverse`
`animation-fill-mode:`	`none` `forwards` `backwards` `both` `initial` `inherit`
`animation-play-state:`	`normal` `reverse` `alternate` `alternate-reverse`

Shorthand

	name	duration	timing-function	delay	count	direction	fill-mode	play-state
`animation:`	`bounce`	`300ms`	`linear`	`100ms`	`infinite`	`alternate-reverse`	`both`	`reverse`
	name	duration	timing-function	delay	count	direction	fill-mode	play-state

Example

animation: bounce 300ms linear 0s infinite normal;
animation: bounce 300ms linear infinite;
animation: bounce 300ms linear infinite alternate-reverse;
animation: bounce 300ms linear 2s infinite alternate-reverse forwards normal;

Event

.one('webkitAnimationEnd oanimationend msAnimationEnd animationend')