VS Code Shortcuts for Web Developers

1. ID & class attributes

• div#header

<div id="header"></div>

• div.header

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

• div#id1.class1

<div id=id1" class="class1"></div>

• p.class1.class2.class3

<p class="class1 class2 class3"></p>

2. Multiplication

• ul>li*2

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

3. Child

• nav>ul>li

<nav> 
  <ul><li></li></ul>
</nav>

4. Sibling

• div+p+a

<div></div>
<p></p>
<a></a>

5. Text

• a{Click Me}

<a href="">Click Me</a>

6. 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>

7. Implicit Tag Names

• ul>.class

<ul>
  <li class="class"></li>
</ul>

• table>.row>.col

<table>
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>

8. Item Numbering

• ul>li.item$*3

<ul>
  <li classs="item1"></li>
  <li classs="item1"></li>
  <li classs="item1"></li>
</ul>