DeftCode Emmet Cheat Sheet

>	Child - `nav>ul>li`
+	Sibling - `div+p+bq`
^	Climb up - `div+div>p>span+em^bq`
( )	Grouping - `div>(header>ul>li*2>a)+footer>p`
*	Multiplication - `ul>li*5`
$	Numbering - `ul>li.item$*5`
.	Class - `h1.title` or `p.class1.class2.class3`
#	ID - `div.#header` or `form#search.wide`
[ ]	Custom attributes - `td[rowspan=2 colspan=3 title]`
{ }	Text - `p>{Click }+a{here}+{ to continue}`

!	Create HTML5 template
a	`<a href=""></a>`
a:link	`<a href="http://"></a>`
a:mail	`<a href="mailto:"></a>`
link	`<link rel="stylesheet" href="" />`
meta	`<meta />`
meta:utf	`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />`
style	`<style></style>`
script	`<script></script>`
script:src	`<script src=""></script>`
img	`<img src="" alt="" />`
form	`<form action=""></form>`
form:get	`<form action="" method="get"></form>`
form:post	`<form action="" method="post"></form>`
label	`<label for=""></label>`
inp	`<input type="text" name="" id="" />`
input:email	`<input type="email" name="" id="" />`
input:p	`<input type="password" name="" id="" />`
input:c	`<input type="checkbox" name="" id="" />`
input:r	`<input type="radio" name="" id="" />`
input:f	`<input type="file" name="" id="" />`
select	`<select name="" id=""></select>`
option	`<option value=""></option>`
textarea	`<textarea name="" id="" cols="30" rows="10"></textarea>`
btn:s	`<button type="submit"></button>`
btn	`<button></button>`
sect	`<section></section>`
art	`<article></article>`
hdr	`<header></header>`
ftr	`<footer></footer>`
mn	`<main></main>`
ol+	`<ol> <li></li> </ol>`
ul+	`<ul> <li></li> </ul>`
dl+	`<ol> <dt></dt> <dd></dd> </ol>`
table+	`<table> <tr> <td></td> </tr> </table>`
tr+	`<tr> <td></td> </tr>`

pos:(a\|r\|f)	`position:absolute\|relative\|fixed;`
t	`top`
r	`right`
b	`bottom`
l	`left`
z	`z-index`
fl:(n\|r\|l)	`float:none\|right\|left;`
cl:(n\|b\|l\|r)	`clear: none\|both\|left\|right;`
d:(n\|b\|f\|i\|ib)	`display: none\|block\|flex\|inline\|inline-block;`
v:(v\|h)	`visibility: visible\|hidden;`
ov:(v\|h\|s)	`overflow: visible\|hidden\|scroll;`
ovx:()	`overflow-x: visible\|hidden\|scroll;`
ovy:()	`overflow-y: visible\|hidden\|scroll;`
m	`margin`
m(r\|t\|b\|l)	`margin-right\|top\|bottom\|left;`
p	`padding`
p(t\|r\|b\|l)	`padding-top\|right\|bottom\|left;`
bxz:bb	`box-sizing: border-box;`
w	`width`
h	`height`
maw	`max-width`
mah	`max-height`
miw	`min-width`
mih	`min-height`
fw	`font-weight`
fz	`font-size`
ff	`font-family`
ta:(l\|c\|r\|j)	`text-align: left\|center\|right\|justify;`
td:n	`text-decoration: none;`
lh	`line-height`
bg:n	`background: none`
bg+	`background: #fff url() 0 0 no-repeat;`
c:(r\|ra)	`color: rgb()\|rgba();`
op	`opacity`
cnt	`content:'';`
ol:n	`outline: none;`
bd+	`border: 1px solid #000;`
bd:n	`border: none;`
bd(t\|r\|l\|b)+	`border-top\|right\|left\|bottom: 1px solid #000;`
bdrs	`border-radius`
lis:n	`list-style: none;`
!	`!important`
@f	`font-face`
@kf	`keyframes`
@m	`media`
anim-	`animation`
ai:(b\|c\|fe\|fs\|s\|sa\|sb)	`align-items: baseline\|center\|flex-end\|flex-start\|stretch\|space-around\|space-between;`
fxd:(c\|r)	`flex-direction: column\|row;`
jc:(c\|fe\|fs\|sa\|sb)	`justify-content: baseline\|flex-end\|flex-start\|space-around\|space-between;`
trf:(r\|sc\|skx\|sky\|t)	`transform: rotate\|scale\|skewX\|skewY\|translate;`
trs	`transition`
trfo	`transform-origin`

Download the DeftCode Emmet Cheat Sheet

3 Pages

Add a Comment

Recent Cheat Sheet Activity

Created By

deftcode

No comments yet. Add yours below!

Juanjux's Vim Cheatsheet Cheat Sheet

Zen Coding Cheat Sheet by Shayanlinux

win/mac/vs code/emmet ショートカット Keyboard Shortcuts

Webstorm OS X Keyboard Shortcuts

AceJump and MacOS Keyboard Shortcuts