概要
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の説明にはのっていなかったのですが、どこから公式に説明されたりしているのだろうか?