DEV Community

Cover image for VS Code Shortcuts for Web Developers
Sandeep
Sandeep

Posted on

VS Code Shortcuts for Web Developers

#vscode #webdev #shortcuts #beginners

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

Top comments (0)