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

sbobet88_dev profile image

Build a Simple Real-Time SBOBET88-Style Website for Beginners with PHP, CSS, and JavaScript

Sbobet88 Dev -

imsushant12 profile image

Launching EC2 Instances with AWS CLI and Advanced Features

Sushant Gaurav -

philip_zhang_854092d88473 profile image

Postman vs. Thunder Client vs. EchoAPI: What are the Differences?

Philip -

philip_zhang_854092d88473 profile image

Best Thunder Client Alternatives for VSCode in 2024

Philip -