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)

Read next

nag5000 profile image

Discover JSREPL.io – A JavaScript REPL & Playground

Aleksey Nagovitsyn -

hungryoctopus profile image

How I Set Up My Own Server (and Why You Should Too)

Amélie -

mshsayket profile image

Laravel 11 Generate and Read Sitemap XML File Tutorial

Saddam Hossain -

dumebii profile image

Devtools Startup Ideas: Building an AI-Powered Debugging Assistant With Code Samples!

Dumebi Okolo -