>
Child element
div>p → <div><p></p></div>
+
Sibling element
div+p → <div></div><p></p>
^
Climb up one level
div>p>span^em → <div><p><span></span></p><em></em></div>
*
Multiplication
ul>li*5 → <ul><li></li>...(x5)</ul>
()
Grouping
(div>dl>(dt+dd)*3)+footer
.
Class name
div.container → <div class="container"></div>
#
ID
div#main → <div id="main"></div>
[]
Custom attributes
a[href="#" title="Link"]
{}
Text content
p{Hello world} → <p>Hello world</p>
$
Item numbering
ul>li.item$*3 → item1, item2, item3
$$
Zero-padded numbering
li.item$$*3 → item01, item02, item03
$@3
Numbering starting from 3
li.item$@3*3 → item3, item4, item5
$@-
Reverse numbering
li.item$@-*3 → item3, item2, item1
!
HTML5 boilerplate
Full HTML document structure
a
Anchor tag
<a href=""></a>
a:link
Link with href
<a href="http://"></a>
a:mail
Mailto link
<a href="mailto:"></a>
link
Link element
<link rel="stylesheet" href="">
link:css
CSS stylesheet link
<link rel="stylesheet" href="style.css">
link:favicon
Favicon link
<link rel="shortcut icon" href="favicon.ico">
script:src
Script with source
&lt;script src=""&gt;&lt;/script&gt;
img
Image element
<img src="" alt="">
input
Input element
<input type="text">
inp
Input (alias)
<input type="text" name="" id="">
input:text
Text input
<input type="text" name="" id="">
input:password
Password input
<input type="password" name="" id="">
input:email
Email input
<input type="email" name="" id="">
input:checkbox
Checkbox input
<input type="checkbox" name="" id="">
input:radio
Radio input
<input type="radio" name="" id="">
input:submit
Submit button
<input type="submit" value="">
btn
Button element
<button></button>
form
Form element
<form action=""></form>
form:get
GET form
<form action="" method="get"></form>
form:post
POST form
<form action="" method="post"></form>
select>option*4
Select with options
<select><option>...</option>(x4)</select>
table>tr>td*3
Table with cells
Table structure
table>(thead>tr>th*3)+(tbody>tr>td*3)
Full table structure
Table with head and body
m
margin
m10 → margin: 10px;
mt / mr / mb / ml
margin-top/right/bottom/left
mt10 → margin-top: 10px;
p
padding
p10-20 → padding: 10px 20px;
pt / pr / pb / pl
padding-top/right/bottom/left
pt10 → padding-top: 10px;
w
width
w100 → width: 100px;
h
height
h50 → height: 50px;
d
display
dn → display: none;
db / di / dib / df / dg
display: block/inline/inline-block/flex/grid
df → display: flex;
pos
position
posa → position: absolute;
fz
font-size
fz16 → font-size: 16px;
fw
font-weight
fwb → font-weight: bold;
ff
font-family
ffs → font-family: serif;
ta
text-align
tac → text-align: center;
td
text-decoration
tdn → text-decoration: none;
tt
text-transform
ttu → text-transform: uppercase;
c
color
c#f00 → color: #f00;
bgc
background-color
bgc#fff → background-color: #fff;
bd
border
bd1-s-#ccc → border: 1px solid #ccc;
bdr
border-radius
bdr5 → border-radius: 5px;
op
opacity
op.5 → opacity: .5;
ov
overflow
ovh → overflow: hidden;
cur
cursor
curp → cursor: pointer;
trs
transition
trs → transition: prop time;
bxsh
box-shadow
bxsh → box-shadow: ...
div.wrapper>header+main+footer
Page layout
Common page structure
nav>ul>li*5>a{Item $}
Navigation with links
Nav list with numbered items
ul>li.item$$$*5
Triple-zero padded list
item001 through item005
div>(header>h1)+(section>p*2)+footer
Grouped nested structure
Complex nested layout
form>input:text+input:email+input:submit
Simple form
Form with text, email, submit
.row>.col*3
Grid row with columns
<div class="row"><div class="col">...
p>lorem
Paragraph with Lorem Ipsum
<p>Lorem ipsum dolor sit amet...</p>
p>lorem10
Paragraph with 10 Lorem words
<p>Lorem ipsum dolor sit amet...</p>
browserutils
Emmet Cheatsheet