emmet.md

   1 ---
   2 title: Emmet
   3 category: Markup
   4 layout: 2017/sheet
   5 prism_languages: [html, css]
   6 updated: 2020-07-03
   7 intro: |
   8   Emmet is a markup language for expanding CSS rules into HTML
   9 ---
  10
  11 ### Child: >
  12
  13 ```css
  14 nav>ul>li
  15 ```
  16 Expands to
  17 ```html
  18 <nav>
  19   <ul>
  20     <li></li>
  21   </ul>
  22 </nav>
  23 ```
  24
  25
  26 ### Sibling: +
  27
  28 ```css
  29 section>p+p+p
  30 ```
  31 Expands to
  32 ```html
  33 <section>
  34   <p></p>
  35   <p></p>
  36   <p></p>
  37 </section>
  38 ```
  39
  40 ### Climb Up: ^
  41
  42 ```css
  43 section>header>h1^footer
  44 ```
  45 Expands to
  46 ```html
  47 <section>
  48   <header>
  49     <h1></h1>
  50   </header>
  51   <footer></footer>
  52 </section>
  53 ```
  54
  55 ### Grouping: ()
  56
  57 ```css
  58 section>(header>nav>ul>li)+footer>p
  59 ```
  60 Expands to
  61 ```html
  62 <section>
  63   <header>
  64     <nav>
  65       <ul>
  66         <li></li>
  67       </ul>
  68     </nav>
  69   </header>
  70   <footer>
  71     <p></p>
  72   </footer>
  73 </section>
  74 ```
  75
  76 ### Multiplication: \*
  77
  78 ```css
  79 ul>li*3
  80 ```
  81 Expands to
  82 ```html
  83 <ul>
  84   <li></li>
  85   <li></li>
  86   <li></li>
  87 </ul>
  88 ```
  89
  90 ### IDs and Classes: . #
  91
  92 ```css
  93 ul.menu>li.menu__item+li#id_item+li.menu__item#id_2
  94 ```
  95 Expands to
  96 ```html
  97 <ul class="menu">
  98   <li class="menu__item"></li>
  99   <li id="id_item"></li>
 100   <li class="menu__item" id="id_2"></li>
 101 </ul>
 102 ```
 103
 104 ### Numbering: $
 105
 106 ```css
 107 ul>li.item$*3
 108 ul>li.item$$*3
 109 ul>li.item$@-*3
 110 ul>li.item$@3*5
 111 ```
 112 Expands to
 113 ```html
 114 <ul>
 115   <li class="item1"></li>
 116   <li class="item2"></li>
 117   <li class="item3"></li>
 118 </ul>
 119 <ul>
 120   <li class="item01"></li>
 121   <li class="item02"></li>
 122   <li class="item03"></li>
 123 </ul>
 124 <ul>
 125   <li class="item3"></li>
 126   <li class="item2"></li>
 127   <li class="item1"></li>
 128 </ul>
 129 <ul>
 130   <li class="item3"></li>
 131   <li class="item4"></li>
 132   <li class="item5"></li>
 133 </ul>
 134 <ul>
 135   <li class="item3"></li>
 136   <li class="item4"></li>
 137   <li class="item5"></li>
 138   <li class="item6"></li>
 139   <li class="item7"></li>
 140 </ul>
 141 ```
 142
 143 ### Attributes: []
 144
 145 ```css
 146 input[type="text"]
 147 div[data-attr="test"]
 148 ```
 149 Expands to
 150 ```html
 151 <input type="text" />
 152 <div data-attr="test"></div>
 153 ```
 154
 155 ### Text: {}
 156
 157 ```css
 158 p{Lorem ipsum}
 159 ```
 160 Expands to
 161 ```html
 162 <p>Lorem ipsum</p>
 163 ```
 164
 165 ### Implicit tags
 166
 167 ```css
 168 .default-block
 169 em>.default-inline
 170 ul>.default-list
 171 table>.default-table-row>.default-table-column
 172 ```
 173 Expands to
 174 ```html
 175 <div class="default-block"></div>
 176 <em><span class="default-inline"></span></em>
 177 <ul>
 178   <li class="default-list"></li>
 179 </ul>
 180 <table>
 181   <tr class="default-table-row">
 182     <td class="default-table-column"></td>
 183   </tr>
 184 </table>
 185 ```