Cheatography
https://cheatography.com
Syntax
> |
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} |
HTML
! |
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>
|
|
|
CSS
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
|
|
Created By
Metadata
Favourited By
Comments
No comments yet. Add yours below!
Add a Comment
Related Cheat Sheets
More Cheat Sheets by deftcode