[HTML5] Emmet

For example we want to generate the code like this:

    <a href="#tab1">Tab 1</a><a href="#tab2">Tab 2</a><a href="#tab3">Tab 3</a>
    <div id="tab1" class="tab">
        <h1>Tab 1 Content</h1>
    </div>
    <div id="tab2" class="tab">
        <h1>Tab 2 Content</h1>
    </div>
    <div id="tab3" class="tab">
        <h1>Tab 3 Content</h1>
    </div>

 

So it is three div, has a id called tab1,2,3 and a class tab. inside the div, has h1 with the content.

We can do:

a[href=#tab$]{Tab $}*3

(#tab$.tab>h1{Tab $ Content})*3

 

[]: attr

#tab: id--> tab

#tab$: id--> tab with increase interger

.tab: class tab

>: child node

{}: content

 

(.column.is-10>input#colorInput.input.is-large)+(.column>a#goButton.button.is-large.is-primary)
<!-- Step 2: Goes inside of the div with a "columns" class
  <div class="column is-10">
    <input
      id="colorInput"
      class="input is-large"
    />
  </div>
  <div class="column">
    <a id="goButton" class="button is-large is-primary">
      Go
    </a>
  </div> -->