Emmet: Climb-Up `^` and Multiplication `*`

The last lesson covered "descending" with > and "laying flat" with +. When your structure gets complex enough that "a sibling needs to go back up a level," those two alone hit a wall — that's when you need ^ to climb up one level. To create 5, 10, or more identical elements at once, use * to repeat.

1. What You'll Learn

• The climb-up operator ^ semantics: "jump out" of the current nesting level by one
• Multi-level climb-up ^^^: jump up multiple levels in succession to reach outer contexts
• The multiplication operator *N semantics: repeat the preceding element N times
• How *N and > work together: > changes context, *N applies to the current level
• Combining complex tree structures: the "stay deep, climb to specified level" pattern with parentheses

2. A Front-End Developer's Real Story

(1) Pain Point: Multi-Level Nesting and Getting "Stuck Deep"

Alice is refactoring an e-commerce homepage, converting a flat layout into a semantic HTML5 three-section structure (header + main + footer). She uses last lesson's body>header+main+footer for the outermost layer, then descends inside header with >nav>ul>li*5>a. But after finishing the header section, a problem arises: footer should follow main as a sibling, but she finds footer ends up inside header — because > keeps pushing the context deeper and deeper, and + just appends at the latest level.

Worse, she needs to build a 6-row by 5-column product table. 6 rows with *6 is no problem, but each row needs 5 td cells repeated — hand-coding 30 td elements means either retyping or writing a long, hard-to-read tr>td*5*6. Alice wonders: if only * could nest inside * properly.

(2) How ^ and * Solve It

Emmet provides two complementary operators to solve both problems:

Climb-up ^: when you finish writing deep inside header and want to jump back to the body level to append footer, a ^ "climbs out" one level, returning to the parent's sibling position. Alice only needs to add a ^ at the end of the header subtree, then append main+footer:

body>header>nav>ul>li*5>a^^main+footer

^^ climbs two levels up from inside ul (first out of ul, then out of nav, back to header level), so +main+footer becomes siblings of header.

Multiplication *: Emmet's * can be placed after any element to repeat it N times — and * can nest > inside to form sub-structures. An entire table is one line:

table>(tr>td*5)*6

tr>td*5 is a "row pattern," wrapped with *6 to repeat the pattern 6 times. From 30 td elements to one abbreviation line — from 5 minutes to 8 seconds.

(3) Benefits

^ and * are the core combination for Emmet's "complex structure" handling. Climb-up lets you precisely control which level each element belongs to; multiplication lets you batch-generate repeated structures in one line. After this lesson, Alice combines body>header+main+footer with ^^^ for perfect level control and writes a 6x5 table with * in one line — from 12 minutes down to 25 seconds. Next lesson's grouping () will make these operators even more powerful when combined.

3. The Climb-Up Operator ^: Return to the Parent Level

^ means climb up — move the position of subsequent elements back from the current level to the parent level. It addresses a common scenario: you've finished a subtree deep inside a nested structure and want the next element to be a sibling of an "ancestor" rather than staying trapped at the current level.

(1) Single Climb-Up Illustration

Key Point: Climb-up is one of Emmet's most confusing operators for beginners. Its "previous context" refers to the parent node in the syntax tree, not "the last element I typed." In other words, in div>ul>li^p, the ^ makes p a sibling of ul (both inside div), not a sibling of li (inside li).

4. The Multiplication Operator *: Batch-Repeating Elements

*N means repeat — duplicate the preceding element N times. This is Emmet's core operator for handling repeated structures like "N list items," "N table rows," and "N cards."

Tip: N in *N must be a positive integer. *1 is valid (equivalent to no repeat) but is usually simplified to the singular form. *0 in Emmet expands to nothing (generates no elements).

(1) Multiplication Scope

* only applies to the immediately preceding element, following the "local context" rule. To repeat an entire nested subtree as a unit, you must use parentheses () for grouping (lesson 6):

5. Hands-On Examples

The following 5 examples cover all core scenarios for ^ and * — from single climb-up to multi-level climb-up, from simple repetition to nested grouped repetition.

▶ Example: Single Climb-Up div+div>p>span+em^bq (Difficulty: ★★)

The problem left from last lesson: how to make bq a sibling of p. The answer is adding a ^.

Abbreviation:

div+div>p>span+em^bq

Expands to:

<div></div>
<div>
  <p><span></span><em></em></p>
  <blockquote></blockquote>
</div>

Output:

TEXT 📖 参照専用

📋 Copy

Parse: div+div creates two sibling divs, >p descends into the second div to place p, >span+em places two siblings inside p. Finally, ^ triggers a climb: from the p level up to the div level (p's parent), so bq becomes a sibling of p — both are children of the second div. Without ^, bq would end up inside p, sibling to span and em.

▶ Example: Multi-Level Climb-Up div+div>p>span+em^^^bq (Difficulty: ★★)

Three consecutive ^ climb all the way to the root level.

Abbreviation:

div+div>p>span+em^^^bq

Expands to:

<div></div>
<div>
  <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

Output:

TEXT 📖 参照専用

📋 Copy

`^^^` climbs up three times: first from p to the second div, second from the second div to the root, third tries again from the root but there's no "higher level" (stays in place). So bq ends up as a sibling of the second div, a direct child of the root. Note: the root level has no explicit container (there's no outermost div), so bq appears alongside div. This "rootless abbreviation" gets auto-wrapped by `<body>` in browsers, but be aware of how level changes affect subsequent CSS selectors.

▶ Example: Multiplication ul>li*5 (Difficulty: ★)

The most basic "batch-generate 5 li elements."

Abbreviation:

ul>li*5

Expands to:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Output:

TEXT 📖 参照専用

📋 Copy

5 empty li elements, all direct children of ul. `*5` acts directly on li — no complex structure needed. This is Emmet's highest-frequency pattern for "5-item navigation menu," "5-item to-do list," "5 feature cards," and similar scenarios. Pair with content filling (lesson 9) to give each item different text.

▶ Example: Repeat + Nest ul>li*3>a (Difficulty: ★)

The classic > + * combo — a as the sole child of each li.

Abbreviation:

ul>li*3>a

Expands to:

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

Output:

TEXT 📖 参照専用

📋 Copy

`*3` only repeats li, and each li contains one a via >. To repeat a as well (3 a per li), use parentheses: ul>li*>a*3 or wrap a in a group. To repeat "(li and a)" as a unit, use (li>a)*3 (lesson 6, grouping). This is a classic Emmet "scope" gotcha.

▶ Example: Group + Repeat (div>dl>(dt+dd)*3)+footer>p (Difficulty: ★★)

This lesson's combined example: nested multiplication + grouping (() is from lesson 6 — previewed here).

Abbreviation:

(div>dl>(dt+dd)*3)+footer>p

Expands to:

<div>
  <dl>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
    <dt></dt>
    <dd></dd>
  </dl>
</div>
<footer>
  <p></p>
</footer>

Output:

TEXT 📖 参照専用

📋 Copy

Parse: the outermost (div>dl>...) acts as a group, serving as a "virtual root." Inside the group, div contains dl, and (dt+dd)*3 inside dl repeats the dt+dd sibling pair 3 times. Then + makes footer a sibling of div (footer is a separate, independent subtree), and >p inside footer places a p. The entire abbreviation line expands to 13 lines of HTML: 1 dl, 6 dt/dd, 1 footer, 1 p. This is Emmet's typical pattern for writing a definition list block in one line.

6. Full Example: 6x5 Product Table

Use nested * and grouping to build a 6-row, 5-column product table with a single abbreviation line.

▶ Example: 6x5 Product Table (Difficulty: ★★)

Abbreviation:

table>(tr>td*5)*6

Expands to:

<table>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

Output:

TEXT 📖 参照専用

📋 Copy

Parse: tr>td*5 is the "one row of cells" template, and the outer *6 repeats this template 6 times. The parentheses (tr>td*5) ensure that td*5 only applies inside tr (5 td all in the same tr), rather than being directly repeated by the outer *6. Two nested * operators form a 2D grid. Without parentheses, tr>td*5*6 would still produce a 6x5 result (Emmet parses it as 5 td per tr, tr repeated 6 times), but the semantics are unclear — not recommended.

❓ よくある質問

📖 まとめ

• ^ means climb up one level, moving context from a child back to its parent
• ^^ and ^^^ perform consecutive climb-ups; climbing past the root stops at the virtual root
• *N repeats the immediately preceding element N times, acting on the current nearest element
• *N and > cooperate: > changes context, *N acts on the nearest element in the new context
• Nested multiplication (e.g., *5 tr containing *6 td) requires parentheses () for grouping (next lesson)
• (tr>td*5)*6 is the standard abbreviation pattern for a "2D table"

📝 練習問題

1. Basic (Difficulty: ★): Write 3 Emmet abbreviations using * that expand to: (a) 5 li; (b) 1 ul containing 3 li, each li containing 1 a; (c) 1 ul containing 1 li, the li containing 3 a.
2. Intermediate (Difficulty: ★★): Analyze how (nav>ul>li*3>a)+main+footer should expand (sketch it on paper first, then verify by expanding). Then rewrite it as an equivalent version using ^ (without parentheses).
3. Challenge (Difficulty: ★★★): Write a single Emmet abbreviation for an 8x8 chessboard table (first cell is <th> heading, the rest are <td>). Explain why this structure requires parentheses for grouping. Also write the "wrong version" without parentheses and compare the actual expansion results.

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて