Emmet DOM Navigating

by

Emmet menyediakan cara navigasi DOM, berikut sintaks yang digunakan:

  • > : menunjukan child
  • + : menunjukan sibling
  • ^ : naik 1 level

Berikut contoh penggunaanya

<!-- ketik div>p -->
<div>
    <p></p>
/div>

<!-- ketik div+p -->
<div></div>
<p></p>

<!-- ketik div>p+p -->
<div>
    <p></p>
    <p></p>
</div>

<!-- ketik div>article>p^footer -->
<div>
    <article>
        <p></p>
    </article>
    <footer></footer>
</div>

Perhatikan untuk tanda ^, emmet akan naik 1 level, footer akan sejajar dengan article (sibling). Kita juga menggunakan tanda ^ berulang kali. Lihat contoh dibawah. Silakan bandingkan jika tanda ^ hanya satu buah.

<!-- ketik div>article>p>em^^a -->

 <div>
     <article>
         <p><em></em></p>
     </article>
     <a href=""></a>
 </div>

Shortcut ini juga dapat digabungkan dengan id dan class

<!-- #mainContainer>.hero>p+span -->
<div id="mainContainer">
    <div class="hero">
        <p></p>
        <span></span>
    </div>
</div>

<!-- ketik .mainContainer>article>p^footer -->
<div class="mainContainer">
    <article>
        <p></p>
    </article>
    <footer></footer>
</div>

Sharing is caring:

Leave a Comment