Tbpgr Blog

Employee Experience Engineer tbpgr(てぃーびー) のブログ

Emmet | Groupingの隠れた挙動

概要

Groupingの隠れた挙動

詳細

EmmetのGroupingの隠れた挙動について。

おそらく公式な仕様としては周知されていないのだと思いますが、
Groupingを使う時に直前の要素に対して「>」や「+」や「^」を利用して
同一階層にするか、一階層下にするか、一階層上に戻るかを選ばなかった場合
独自の動作をするようです。

下の階層に付ける場合。

Emmet

body>div>(p*3)+b

HTML

<body>
  <div>
    <p></p>
    <p></p>
    <p></p>
    <b></b>
  </div>
</body>
同一階層にする場合

Emmet

body>div+(p*3)+b

HTML

<body>
  <div></div>
  <p></p>
  <p></p>
  <p></p>
  <b></b>
</body>
一階層戻る場合

Emmet

body>div^(p*3)+b

HTML

<body>
  <div></div>
</body>
<p></p>
<p></p>
<p></p>
<b></b>
省略した場合

pタグがdivの配下につくのは「>」と同様の動作をしています。
しかし、次のbタグが一階層上に出力されていることからbタグを
処理する時点でカレントのタグがdivと判断されているのではないでしょうか。

つまり、Groupingの括弧の前を省略した場合は
「一階層下に要素を追加しつつ、カレント要素の遷移は行わない」
という独自仕様になっているのではないでしょうか。

Emmet

body>div(p*3)+b

HTML

<body>
  <div>
    <p></p>
    <p></p>
    <p></p>
  </div>
  <b></b>
</body>

とりあえず
http://docs.emmet.io/abbreviations/syntax/
のSyntaxの説明にはのっていなかったのですが、どこから公式に説明されたりしているのだろうか?