Emmet code examples in Sublime text
Run in Sublime menu Package Control: Install Package command, type Emmet and install it.
First type code in Emmet syntax, after that press Tab on your keyboard and view result.
ul.nav
|
1 |
<ul class="nav"></ul> |
li{some text}*2
|
1 2 |
<li>some text</li> <li>some text</li> |
ul.nav>li{some text}*2
|
1 2 3 4 |
<ul class="nav"> <li>some text</li> <li>some text</li> </ul> |
a{link text}
|
1 |
<a href="">link text</a> |
a[href=#]{link text}
|
1 |
<a href="#">link text</a> |
li>a[href=#]{link text}*3
|
1 2 3 4 5 |
<li> <a href="#">link text</a> <a href="#">link text</a> <a href="#">link text</a> </li> |
ul.nav>li*3>a[href=#]{link text$}
|
1 2 3 4 5 |
<ul class="nav"> <li><a href="#">link text1</a></li> <li><a href="#">link text2</a></li> <li><a href="#">link text3</a></li> </ul> |
.menu>ul.nav>li*3>a[href=#]{link text$}
|
1 2 3 4 5 6 7 |
<div class="menu"> <ul class="nav"> <li><a href="#">link text1</a></li> <li><a href="#">link text2</a></li> <li><a href="#">link text3</a></li> </ul> </div> |
.menu>.first+.second
|
1 2 3 4 |
<div class="menu"> <div class="first"></div> <div class="second"></div> </div> |
.menu>.block*2
|
1 2 3 4 |
<div class="menu"> <div class="block"></div> <div class="block"></div> </div> |
.menu>.block*2>li{some text}*2
|
1 2 3 4 5 6 7 8 9 10 |
<div class="menu"> <div class="block"> <li>some text</li> <li>some text</li> </div> <div class="block"> <li>some text</li> <li>some text</li> </div> </div> |
.menu>.block*2>ul.nav>li*3>a[href=#]{link text$}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="menu"> <div class="block"> <ul class="nav"> <li><a href="#">link text1</a></li> <li><a href="#">link text2</a></li> <li><a href="#">link text3</a></li> </ul> </div> <div class="block"> <ul class="nav"> <li><a href="#">link text1</a></li> <li><a href="#">link text2</a></li> <li><a href="#">link text3</a></li> </ul> </div> </div> |