Amazing Emmet shortcuts to code faster
Tags: emmet, webdev, html, css
Published: 2021-11-14 16:24:36

[Emmet](https://emmet.io) is one the most useful extensions which is used to write lines of code with a single shortcut. Here are some top Emmet shortcuts to save your time ⏳.

##Prerequisites
1. Make sure you have [Emmet](https://emmet.io) extension installed in your code editor.
  * For [visual studio code](https://code.visualstudio.com/docs/editor/emmet)
  * For [Jetbrains IDEs](https://www.jetbrains.com/help/idea/using-zen-coding-support.html)
  * For [Atom](https://atom.io/packages/emmet)
2. Knowledge on HTML, CSS

#Let's get started
![Let's get started](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wq7c5o3hmb9nv1li7b1.gif)

##1. Sibling - `+`
>`main+section+footer`
```java
1 <main></main>
2 <section></section>
3 <footer></footer>
``` 

##2. Child - `>`
>`html>body>main>h1`
```java
1 <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`
```java
1 <div></div>
2 <div>
3     <p><span></span><em></em></p>
4 </div>
5 <blockquote></blockquote>
```

##4. Multiplication - `*`
>`select>option*3`
```java
1 <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`
```java
1 <h1 title="item1">Header 1</h1>
2 <h2 title="item2">Header 2</h2>
3 <h3 title="item3">Header 3</h3>
```
####Reverse
>`h$@-*3`
```java
1 <h3></h3>
2 <h2></h2>
3 <h1></h1>
```
####Start from
>`h$@3*5`
```java
1 <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`
```java
1 <main>
2     <h1></h1>
3 </main>
4 <footer></footer>
```

##7. ID and CLASS attributes - `#`,`.`
> `form#search.wide`
```java
1 <form id="search" class="wide"></form>
```
>`div.class1.class2`
```java
1 <div class="class1 class2"></div>
```

##8. Custom attributes
>`input[type="password" name="password"]`
```java
1 <input type="password" name="password">
```

##9. Text - `{}`
>`button{Click me}`
```java
1 <button>Click me</button>
```

##10. Implicit tag names
>`table>.row>.col`
```java
1 <table>
2     <tr class="row">
3         <td class="col"></td>
4     </tr>
5 </table>
```
---
##Now see some CSS 🥶
>`pos:f`
```java
1 position:fixed;
```

>`d:if`
```java
1 display:inline-flex;
```

>`d:tbclg`
```java
1 display:table-column-group;
```

>`mb:a`
```java
1 margin-bottom:auto;
```

>`bxsh`
```java
1 box-shadow:inset hoff voff blur color;
```

>`ff:ss`
```java
1 font-family:sans-serif;
```

>`whs:nw`
```java
1 white-space:nowrap;
```

>`bgc:t`
```java
1 background-color:transparent;
```

>`bd+`
```java
1 border:1px solid #000;
```

>`trf:t3`
```java
1 transform: translate3d(tx, ty, tz);
```

>`anim-`
```java
1 animation:name duration timing-function delay iteration-count
2 direction fill-mode;
```

>`@kf`
```java
1 @-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 

![That's it for today](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ytv3rr2sojvxtb09ggvo.gif)
 
 
---

Hope this helps you!
Save for reference.
Connect with me on [Twitter](https://twitter.com/rakesh_at_tweet) and [GitHub](https://github.com/RakeshPotnuru). Follow me for more 😃.