written by Rakesh Potnuruless than a minute read
Amazing Emmet shortcuts for HTML and CSS to code faster
Emmet is one of the most useful extensions which are used to write lines of code with a single shortcut. Here are some top Emmet shortcuts to save your time ⏳.
Prerequisites
- Make sure you have Emmet extension installed in your code editor.
- For visual studio code
- For Jetbrains IDEs
- For Atom
- Knowledge on HTML, CSS
Let's get started
1. Sibling - +
main+section+footer
html1<main></main> 2<section></section> 3<footer></footer>
2. Child - >
html>body>main>h1
html1<html> 2<body> 3 <main> 4 <h1></h1> 5 </main> 6</body> 7</html>
3. Climb-up - ^
Each ^ makes the element separate from previous element by one level.
div+div>p>span+em^^bq
html1<div></div> 2<div> 3 <p><span></span><em></em></p> 4</div> 5<blockquote></blockquote>
4. Multiplication - *
select>option*3
html1<select name="" id=""> 2 <option value=""></option> 3 <option value=""></option> 4 <option value=""></option> 5</select>
5. Item numbering - $
h$[title=item$]{Header $}*3
html1<h1 title="item1">Header 1</h1> 2<h2 title="item2">Header 2</h2> 3<h3 title="item3">Header 3</h3>
Reverse
h$@-*3
html1<h3></h3> 2<h2></h2> 3<h1></h1>
Start from
h$@3*5
html1<h3></h3> 2<h4></h4> 3<h5></h5> 4<h6></h6> 5<h7></h7>
6. Grouping - ()
You can't do something like this main>h1+footer. These is where grouping helps.
(main>h1)+footer
html1<main> 2 <h1></h1> 3</main> 4<footer></footer>
7. ID and CLASS attributes - #,.
form#search.wide
html1<form id="search" class="wide"></form>
div.class1.class2
html1<div class="class1 class2"></div>
8. Custom attributes
input[type="password" name="password"]
html1<input type="password" name="password">
9. Text - {}
button{Click me}
html1<button>Click me</button>
10. Implicit tag names
table>.row>.col
html1<table> 2 <tr class="row"> 3 <td class="col"></td> 4 </tr> 5</table>
Now see some CSS 🥶
pos:f
css1position:fixed;
d:if
css1display:inline-flex;
d:tbclg
css1display:table-column-group;
mb:a
css1margin-bottom:auto;
bxsh
css1box-shadow:inset hoff voff blur color;
ff:ss
css1font-family:sans-serif;
whs:nw
css1white-space:nowrap;
bgc:t
css1background-color:transparent;
bd+
css1border:1px solid #000;
trf:t3
css1transform: translate3d(tx, ty, tz);
anim-
css1animation:name duration timing-function delay iteration-count 2direction fill-mode;
@kf
css1@-webkit-keyframes identifier { 2 from { } 3 to { } 4} 5@-o-keyframes identifier { 6 from { } 7 to { } 8} 9@-moz-keyframes identifier { 10 from { } 11 to { } 12} 13@keyframes identifier { 14 from { } 15 to { } 16}
That's it
Thanks for reading!