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

&l…


This content originally appeared on DEV Community and was authored by sandeepk27

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>


This content originally appeared on DEV Community and was authored by sandeepk27


Print Share Comment Cite Upload Translate Updates
APA

sandeepk27 | Sciencx (2022-04-10T03:18:53+00:00) VS Code Shortcuts for Web Developers. Retrieved from https://www.scien.cx/2022/04/10/vs-code-shortcuts-for-web-developers/

MLA
" » VS Code Shortcuts for Web Developers." sandeepk27 | Sciencx - Sunday April 10, 2022, https://www.scien.cx/2022/04/10/vs-code-shortcuts-for-web-developers/
HARVARD
sandeepk27 | Sciencx Sunday April 10, 2022 » VS Code Shortcuts for Web Developers., viewed ,<https://www.scien.cx/2022/04/10/vs-code-shortcuts-for-web-developers/>
VANCOUVER
sandeepk27 | Sciencx - » VS Code Shortcuts for Web Developers. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/04/10/vs-code-shortcuts-for-web-developers/
CHICAGO
" » VS Code Shortcuts for Web Developers." sandeepk27 | Sciencx - Accessed . https://www.scien.cx/2022/04/10/vs-code-shortcuts-for-web-developers/
IEEE
" » VS Code Shortcuts for Web Developers." sandeepk27 | Sciencx [Online]. Available: https://www.scien.cx/2022/04/10/vs-code-shortcuts-for-web-developers/. [Accessed: ]
rf:citation
» VS Code Shortcuts for Web Developers | sandeepk27 | Sciencx | https://www.scien.cx/2022/04/10/vs-code-shortcuts-for-web-developers/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.