1. ID and CLASS Attributes

• Add ID attr html tag

div#info 👇
<div id="info"></div>

• Add a CLASS attr to html tag

div.header 👇
<div class="header"></div>

• Add ID and CLASS attr

form#search.info 👇
<form id="search" class="info"></form>

• Add multiple CLASS and ID attr

p.info1.info2.info3#info
<p class="info1 info2 info3" id='info'></p>

1. ELEMENT WITH CHILD and MULTIPLICATION

• Add child element to a parent element

ul>li 👇
<ul>
    <li></li>
</ul>

• Add multiple child elements

ul>li*5 👇
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

1. ELEMENT with SIBLINGS

   • Add html element next to another

div+section+p 👇
<div></div>
<section></section>
<p></p>

1. HTML tag with TEXT

a{Google} 👇
<header> <a href="">Google</a> </header>

1. GROUPING

div>(header>ul>li*2>a)+footer>p 👇
<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

1. IMPLICIT TAG NAMES

   • Adding multiple child element with same class

ul>.item👇
<ul>
    <li class="item"></li>
</ul>

table>.row>.col*3 👇
<table>
    <tr class="row">
        <td class="col"></td>
        <td class="col"></td>
        <td class="col"></td>
    </tr>
</table>

1. ITEM NUMBERING
2. Adding numbered class names to child elements

ul>li.item$*5
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

Thank you for following✨

What other VSCODE shortcut can you suggest?
comment below👇👇