| Selector | Example | Example description |
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is an <div> element |
| element+element | div + p | Selects the first <p> element that is placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that is preceded by an <p> element |
Parent-Child
Emmet allows you to specify children for your elements by using the child operator >. Applying this will create an element inside of another one, as many levels deep as you require.
div>ul>li
<div>
<ul>
<li></li>
</ul>
</div>
Kindly Note that the element to the left of > will act as the parent for the element to the right of >.
Adding Sibling
We can give HTML sibling tags by using emmet. (Elements that have the same parent are considered siblings.) To accomplish this, we must insert + symbols between tags.
div>p+p
<div>
<p></p>
<p></p>
</div>
Multiplication
We now know how to include a child inside of a tag. But what if we need to put more children inside the tag (all with the same tag)? In certain circumstances, tag multiplication is an option. After the tag that needs to be multiplied and before the number of repetitions, we need to add a *.
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
Grouping
Emmet can be used to group HTML tags. To accomplish this, a bracket must be placed around the tags that will be gathered ().
div(nav>ul>li*2>a)+footer>p
<div>
<nav>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</nav>
<footer>
<p></p>
</footer>
</div>