Last updated:
2 min read
Amazing Emmet shortcuts for HTML and CSS to code faster
Rakesh Potnuru
Author
0%
SHARE

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

  1. Make sure you have Emmet extension installed in your code editor.
  1. Knowledge on HTML, CSS

Let's get started

Let's get started

1. Sibling - +

main+section+footer

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

2. Child - >

html>body>main>h1

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

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

4. Multiplication - *

select>option*3

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

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

Reverse

h$@-*3

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

Start from

h$@3*5

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

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

7. ID and CLASS attributes - #,.

form#search.wide

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

div.class1.class2

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

8. Custom attributes

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

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

9. Text - {}

button{Click me}

1<button>Click me</button>

10. Implicit tag names

table>.row>.col

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

Now see some CSS 🥶

pos:f

1position:fixed;

d:if

1display:inline-flex;

d:tbclg

1display:table-column-group;

mb:a

1margin-bottom:auto;

bxsh

1box-shadow:inset hoff voff blur color;

ff:ss

1font-family:sans-serif;

whs:nw

1white-space:nowrap;

bgc:t

1background-color:transparent;

bd+

1border:1px solid #000;

trf:t3

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

anim-

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

@kf

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!


LEAVE A COMMENT OR START A DISCUSSION

MORE ARTICLES

Let's learn about APIs and how to create and sell one

    11 min read

Let's learn about APIs and how to create and sell one

If you are in tech, then you may have heard this popular term called "API". Some people use APIs for fun, some for money, and some for their applications. There are N ways you can use APIs. In this blog, let's learn what exactly is an API, how you can build your own API, and how you can monetize your API.

Web 2.0 app architecture Vs Web 3.0 app  architecture

    3 min read

Web 2.0 app architecture Vs Web 3.0 app architecture

If you are switching from web2 to web3 or if you want to learn web3 then you may have doubts about how web3 is different from web2? Are there any similarities? Can I directly jump into web3 without knowing web2 stuff?. So, in this blog, get answers to your questions by learning the architectures of both.

Subscribe to Newsletter

Weekly


  • Never miss an update.
  • Get articles and snippets directly to your inbox.
  • Subscribe to stay connected and avoid getting lost among millions of websites.

Monthly


  • Coming soon...