CSS cheatsheet

 CSS Cheatsheets

Selectors

.class {

  font-weight: bold;

}

 

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

Combinators

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

Attribute selectors

[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

: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

:first-of-type

:last-of-type

:nth-of-type(2)

:only-of-type

:first-child

:last-child

:nth-child(2)

:only-child

Fonts

Properties

font-family:	<font>, <fontN>
font-size:	<size>
letter-spacing:	<size>
line-height:	<number>
font-weight:	boldnormal
font-style:	italicnormal
text-decoration:	underlinenone
text-align:	leftrightcenterjustify
text-transform:	capitalizeuppercaselowercase

Shorthand

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

background:	(Shorthand)
background-color:	<color>
background-image:	url(...)
background-position:	left/center/righttop/center/bottom
background-size:	coverX Y
background-clip:	border-boxpadding-boxcontent-box
background-repeat:	no-repeatrepeat-xrepeat-y
background-attachment:	scrollfixedlocal

Shorthand

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

animation:	(shorthand)
animation-name:	<name>
animation-duration:	<time>ms
animation-timing-function:	easelinearease-inease-outease-in-out
animation-delay:	<time>ms
animation-iteration-count:	infinite<number>
animation-direction:	normalreversealternatealternate-reverse
animation-fill-mode:	noneforwardsbackwardsbothinitialinherit
animation-play-state:	normalreversealternatealternate-reverse

Shorthand

animation:

 

            name    duration    timing-function  delay      count            direction          fill-mode   play-state   

            XXX     300ms       linear                100ms   infinite        alternate-reverse      both        reverse

 

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')