Amazing Emmet shortcuts for HTML and CSS to code faster

written by Rakesh PotnuruNov 13, 2021 ・ less than a minute read ・ Updated Jan 12, 2025

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.

Knowledge on HTML, CSS

Let's get started

1. Sibling - `+`

main+section+footer

html
1<main></main>
2<section></section>
3<footer></footer>

2. Child - `>`

html>body>main>h1

html
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

html
1<div></div>
2<div>
3    <p><span></span><em></em></p>
4</div>
5<blockquote></blockquote>

4. Multiplication - `*`

select>option*3

html
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

html
1<h1 title="item1">Header 1</h1>
2<h2 title="item2">Header 2</h2>
3<h3 title="item3">Header 3</h3>

Reverse

h$@-*3

html
1<h3></h3>
2<h2></h2>
3<h1></h1>

Start from

h$@3*5

html
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

html
1<main>
2    <h1></h1>
3</main>
4<footer></footer>

7. ID and CLASS attributes - `#`,`.`

form#search.wide

html
1<form id="search" class="wide"></form>

div.class1.class2

html
1<div class="class1 class2"></div>

8. Custom attributes

input[type="password" name="password"]

html
1<input type="password" name="password">

9. Text - `{}`

button{Click me}

html
1<button>Click me</button>

10. Implicit tag names

table>.row>.col

html
1<table>
2    <tr class="row">
3        <td class="col"></td>
4    </tr>
5</table>

Now see some CSS 🥶

pos:f

css
1position:fixed;

d:if

css
1display:inline-flex;

d:tbclg

css
1display:table-column-group;

mb:a

css
1margin-bottom:auto;

bxsh

css
1box-shadow:inset hoff voff blur color;

ff:ss

css
1font-family:sans-serif;

whs:nw

css
1white-space:nowrap;

bgc:t

css
1background-color:transparent;

bd+

css
1border:1px solid #000;

trf:t3

css
1transform: translate3d(tx, ty, tz);

anim-

css
1animation:name duration timing-function delay iteration-count
2direction fill-mode;

@kf

css
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

Thanks for reading!

Loved this post?

Amazing Emmet shortcuts for HTML and CSS to code faster

Prerequisites

Let's get started

1. Sibling - `+`

2. Child - `>`

3. Climb-up - `^`

4. Multiplication - `*`

5. Item numbering - `$`

Reverse

Start from

6. Grouping - `()`

7. ID and CLASS attributes - `#`,`.`

8. Custom attributes

9. Text - `{}`

10. Implicit tag names

Now see some CSS 🥶

Comments

Interested in
working
with me?

Amazing Emmet shortcuts for HTML and CSS to code faster

Prerequisites

Let's get started

1. Sibling - +

2. Child - >

3. Climb-up - ^

4. Multiplication - *

5. Item numbering - $

Reverse

Start from

6. Grouping - ()

7. ID and CLASS attributes - #,.

8. Custom attributes

9. Text - {}

10. Implicit tag names

Now see some CSS 🥶

Comments

Interested in working with me?

1. Sibling - `+`

2. Child - `>`

3. Climb-up - `^`

4. Multiplication - `*`

5. Item numbering - `$`

6. Grouping - `()`

7. ID and CLASS attributes - `#`,`.`

9. Text - `{}`

Interested in
working
with me?