└── README.md


/README.md:
--------------------------------------------------------------------------------
  1 | # Emmet HTML Snippets Cheatsheet
  2 | 
  3 | Snippet then tab or enter
  4 | 
  5 | ### Base Elements
  6 | 
  7 | > *   `div`
  8 | > *   `h1`
  9 | > *   `p`
 10 | > *   `nav`
 11 | 
 12 | ### Id and Class Attributes
 13 | 
 14 | Add '.' followed by classname
 15 | 
 16 | > .container -> div with a class of container
 17 | 
 18 | > div.container -> div with a class of container
 19 | 
 20 | > h3.text-center -> h3 with class of text-center
 21 | 
 22 | > div.container.flex-container -> div with class of container AND flex-container
 23 | 
 24 | Add '#' followed by id
 25 | 
 26 | > #mainContainer -> div with id of mainContainer
 27 | 
 28 | > div#mainContainer -> div with id of mainContainer
 29 | 
 30 | > h1#header -> h1 with id of header
 31 | 
 32 | Combine class and id
 33 | 
 34 | > div.container#mainContainer -> div with class of container and id of mainContainer
 35 | 
 36 | > h1.text-center#header -> h1 with class of text-center and id of header
 37 | 
 38 | ### Multiplications
 39 | 
 40 | > h1\*3 -> 3 h1's
 41 | 
 42 | > li\*3 -> 3 li's
 43 | 
 44 | ### Numbering
 45 | 
 46 | use the '$' operator combined with a multiplication to apply an index to an element
 47 | 
 48 | > ul>li.item$\*5 -> ul with 5 elements that have classes of item1, item2, etc.
 49 | 
 50 | ### Child
 51 | 
 52 | Use '>' to add children
 53 | 
 54 | > div>h1 -> div with a child of H1
 55 | 
 56 | > ul>li -> ul with child of li
 57 | 
 58 | > ul>li\*3 -> ul with 3 li children
 59 | 
 60 | ### Sibling
 61 | 
 62 | Use '+' to add siblings
 63 | 
 64 | > div>h1+p -> div with two children, h1 and p
 65 | 
 66 | > ul>li+li -> ul with two li children
 67 | 
 68 | > form>input:text+input:text+input:submit -> form with two text input children and a child submitt button
 69 | 
 70 | ### Groupings
 71 | 
 72 | Use parenthesis to group things together...think complex children
 73 | 
 74 | > div>(form>input:text+input:text+input:submit)+p -> div with two children a form (with two inputs and a submit button) and a p tag
 75 | 
 76 | ### Custom Attribute
 77 | 
 78 | Set custom attributes with brackets '[]'
 79 | 
 80 | > p[title="Hello world"] -> p with title attribute set to 'Hello world'
 81 | 
 82 | ### Text
 83 | 
 84 | Set inner text for text elements with curly braces '{}'
 85 | 
 86 | > p{hello} -> p with inner text of hello
 87 | 
 88 | > a{Click here} -> anchor tag with inner text of Click here
 89 | 
 90 | ### Good to know
 91 | 
 92 | Here's some extra ones to know!
 93 | 
 94 | > !
 95 | 
 96 | > link:css
 97 | 
 98 | > script:src
 99 | 
100 | > input:text|email|password|date|number|submit|button
101 | 
102 | > btn
103 | 


--------------------------------------------------------------------------------