Syntax: Child
Syntax: Child
Child: >
nav>ul>li
<nav>
<ul>
<li></li>
</ul>
</nav>
Sibling: +
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
Climb-up: ^
div+div>p>span+em^bq div+div>p>span+em^^bq
<div></div> <div></div>
<div> <div>
<p><span></span><em></em></p> <p><span></span><em></em></p>
<blockquote></blockquote> </div>
</div> <blockquote></blockquote>
Grouping: ()
div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p
<div> <div>
<header> <dl>
<ul> <dt></dt>
<li><a href=""></a></li> <dd></dd>
<li><a href=""></a></li> <dt></dt>
</ul> <dd></dd>
</header> <dt></dt>
<footer> <dd></dd>
<p></p> </dl>
</footer> </div>
</div> <footer>
<p></p>
</footer>
Multiplication: *
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Item numbering: $
1 of 17
ul>li.item$*5 h$[title=item$]{Header $}*3 ul>li.item$$$*5
<ul> <h1 title="item1">Header 1</h1> <ul>
<li class="item1"></li> <h2 title="item2">Header 2</h2> <li class="item001"></li>
<li class="item2"></li> <h3 title="item3">Header 3</h3> <li class="item002"></li>
<li class="item3"></li> <li class="item003"></li>
<li class="item4"></li> <li class="item004"></li>
<li class="item5"></li> <li class="item005"></li>
</ul> </ul>
ul>li.item$@-*5 ul>li.item$@3*5
<ul> <ul>
<li class="item5"></li> <li class="item3"></li>
<li class="item4"></li> <li class="item4"></li>
<li class="item3"></li> <li class="item5"></li>
<li class="item2"></li> <li class="item6"></li>
<li class="item1"></li> <li class="item7"></li>
</ul> </ul>
p.class1.class2.class3
<p class="class1 class2 class3"></p>
Custom attributes
p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"]
<p title="Hello world"></p> <td rowspan="2" colspan="3" title=""></td> <div a="value1" b="value2"></div>
Text: {}
a{Click me} p>{Click }+a{here}+{ to continue}
<a href="">Click me</a> <p>Click <a href="">here</a> to continue</p>
table>.row>.col
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
HTML
All unknown abbreviations will be transformed to tag, e.g. foo <foo></foo>.
2 of 17
! a a:link
<a href=" "> </a> <a href="http:// "> </a>
Alias of html:5
<!DOCTYPE html> a:mail abbr
<html lang="en"> <a href="mailto: "> </a> <abbr title=" "> </abbr>
<head>
acronym, acr base
<meta charset="UTF-8" />
<acronym title=" "> </acronym> <base href=" " />
<title> Document </title>
</head> basefont br
<body> <basefont /> <br />
frame hr
</body>
<frame /> <hr />
</html>
bdo bdo:r
<bdo dir=" "> </bdo> <bdo dir="rtl"> </bdo>
source:media:type, src:mt
<source media="( min-width: )" srcset=" " type=" image/ "
/>
input:email
Alias of inp[type=email]
<input type="email" name=" " id=" " />
g gc pic
5 of 17
dlg str prog
mn tem datag
datal kg out
</body>
</html>
</body>
</html>
6 of 17
html:4t html:4s html:xt
Alias of table>tr>td
<table>
<tr>
<td> </td>
</tr>
7 of 17
</table>
colgroup+, colg+ tr+ select+
CSS
CSS module uses fuzzy search to find unknown abbreviations, e.g. ov:h == ov-h == ovh == oh.
If abbreviation wasnt found, it is transformed into property name: foo-bar foo-bar: |;
You can prefix abbreviations with hyphen to produce vendor-prefixed properties: -foo
Visual Formatting
pos position: relative ; pos:s position:static; pos:a position:absolute;
:l oat:left;
cl:l clear:left;
ovx:h overow-x:hidden;
ovs:s overow-style:scrollbar;
cp:r clip:rect( top right bottom left ); rsz resize: ; rsz:n resize:none;
cur:t cursor:text;
Box Sizing
bxz box-sizing: border-box ; bxz:cb box-sizing:content-box; bxz:bb box-sizing:border-box; 9 of 17
bxsh box-shadow: inset ho vo blur bxsh:r box-shadow: inset ho vo blur bxsh:ra box-shadow: inset h v blur
color ; spread rgb( 0 , 0 , 0 ); spread rgba( 0 , 0 , 0 , . 5 );
Font
f font: ; f+ font: 1em Arial,sans-serif ; fw font-weight: ;
fw:n font-weight:normal;
:m font-family:monospace; :a font-family: Arial, "Helvetica Neue", :t font-family: "Times New Roman", Times,
Helvetica, sans-serif; Baskerville, Georgia, serif;
Text
va vertical-align: top ; va:sup vertical-align:super; va:t vertical-align:top;
tr text-replace: ;
tt:c text-transform:capitalize;
tw:s text-wrap:suppress; tsh text-shadow: ho vo blur #000 ; tsh:r text-shadow: h v blur rgb( 0 , 0 ,
0 );
wow:b word-wrap:break-word;
11 of 17
Background
bg background:# 000 ; bg+ background: #f url( ) 0 0 bg:n background:none;
no-repeat ; bgc background-color:# f ;
Color
c color:# 000 ; c:r color:rgb( 0 , 0 , 0 ); c:ra color:rgba( 0 , 0 , 0 , . 5 );
op opacity: ;
Generated content
cnt content:' '; cnt:n, ct:n content:normal; cnt:oq, ct:oq content:open-quote;
q:ru quotes:'\00AB' '\00BB' '\201E' '\201C'; q:en quotes:'\201C' '\201D' '\2018' '\2019'; coi counter-increment: ;
cor counter-reset: ;
Outline
ol outline: ; ol:n outline:none; olo outline-oset: ;
olc:i outline-color:invert;
Tables 12 of 17
tbl table-layout: ; tbl:a table-layout:auto; tbl:f table-layout:xed;
Border
bd border: ; bd+ border: 1px solid #000 ; bd:n border:none;
bdi border-image:url( );
bdtw border-top-width: ;
bdb, bb border-bottom: ;
bdlw border-left-width: ;
Lists
lis list-style: ; lis:n list-style:none; lisp list-style-position: ;
lisi:n list-style-image:none;
Print
pgbb page-break-before: ; pgbb:au page-break-before:auto; pgbb:al page-break-before:always;
Others
! !important @f @font-face { @f+ @font-face {
font-family: ; font-family: ' FontName ';
src:url(|); src: url(' FileName .eot');
}
src: url(' FileName .eot?#iex')
format('embedded-opentype'),
url(' FileName .wo') format('wo'),
url(' FileName .ttf') format('truetype'),
url(' FileName .svg# FontName ')
format('svg');
font-style: normal ;
font-weight: normal ;
14 of 17
}
@i, @import @import url( ); @kf @-webkit-keyframes identier { @m, @media @media screen {
from { }
to { } }
} ac align-content: ;
@-o-keyframes identier {
ac:c align-content:center;
from { }
to { } ac:fe align-content:ex-end;
}
ac:fs align-content:ex-start;
@-moz-keyframes identier {
from { } ac:s align-content:stretch;
to { }
ac:sa align-content:space-around;
}
@keyframes identier { ac:sb align-content:space-between;
from { }
ai align-items: ;
to { }
} ai:b align-items:baseline;
ai:c align-items:center;
bfv:v backface-visibility:visible;
15 of 17
bg:ie lter:progid:DXImageTransform.Microsoft.Alp cm /* ${child} */ colm columns: ;
haImageLoader(src=' x .png',sizingMethod='
colmc column-count: ; colmf column-ll: ;
crop ');
colmg column-gap: ; colmr column-rule: ;
trf transform: ; trf:r transform: rotate( angle ); trf:rx transform: rotateX( angle );
trf:ry transform: rotateY( angle ); trf:rz transform: rotateZ( angle ); trf:sc transform: scale( x , y );
trf:scz transform: scaleZ( z ); trf:skx transform: skewX( angle ); trf:sky transform: skewY( angle );
trs transition: prop time ; trsde transition-delay: time ; trsdu transition-duration: time ;
wfsm -webkit-font-smoothing:${antialiased};
wm:tbr writing-mode:tb-rl;
XSL
tmatch, tm tname, tn call
<xsl:template match=" " mode=" "> </xsl:template> <xsl:template name=" "> </xsl:template> <xsl:call-template name=" " />
ap api imp
<xsl:apply-templates select=" " mode=" " /> <xsl:apply-imports /> <xsl:import href=" " />
inc ch xsl:when, wh
<xsl:include href=" " /> <xsl:choose> </xsl:choose> <xsl:when test=" "> </xsl:when>
ot if par
<xsl:otherwise> </xsl:otherwise> <xsl:if test=" "> </xsl:if> <xsl:param name=" "> </xsl:param>
wp key elem
<xsl:with-param name=" " select=" " /> <xsl:key name=" " match=" " use=" " /> <xsl:element name=" "> </xsl:element>
attr attrs cp
<xsl:attribute name=" "> </xsl:attribute> <xsl:attribute-set name=" "> </xsl:attribute-set> <xsl:copy select=" " />
!!!
<?xml version="1.0" encoding="UTF-8"?>
17 of 17