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')
0 Comments for this cheatsheet. Write yours!