TheLazy.Dev
Portfolio GitHub

Blog

vscode |webdev |shortcuts |beginners

VS Code Shortcuts for Web Developers

sandeepk27

Sandeep

Posted on April 10, 2022

VS Code Shortcuts for Web Developers

1. ID & class attributes

  • div#header 
<div id="header"></div>
Enter fullscreen mode Exit fullscreen mode
  • div.header 
<div class="header"></div>
Enter fullscreen mode Exit fullscreen mode
  • div#id1.class1 
<div id=id1" class="class1"></div>
Enter fullscreen mode Exit fullscreen mode
  • p.class1.class2.class3 
<p class="class1 class2 class3"></p>
Enter fullscreen mode Exit fullscreen mode

2. Multiplication

  • ul>li*2 
<ul>
  <li></li>
  <li></li>
</ul>
Enter fullscreen mode Exit fullscreen mode

3. Child

  • nav>ul>li 
<nav> 
  <ul><li></li></ul>
</nav>
Enter fullscreen mode Exit fullscreen mode

4. Sibling

  • div+p+a 
<div></div>
<p></p>
<a></a>
Enter fullscreen mode Exit fullscreen mode

5. Text

  • a{Click Me} 
<a href="">Click Me</a>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

7. Implicit Tag Names

  • ul>.class 
<ul>
  <li class="class"></li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • table>.row>.col 
<table>
  <tr class="row">
    <td class="col"></td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

8. Item Numbering

  • ul>li.item$*3 
<ul>
  <li classs="item1"></li>
  <li classs="item1"></li>
  <li classs="item1"></li>
</ul>
Enter fullscreen mode Exit fullscreen mode
💖 💪 🙅 🚩
sandeepk27
Sandeep

Posted on April 10, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

VS Code Shortcuts for Web Developers
vscode VS Code Shortcuts for Web Developers

April 10, 2022