DevBytes

Parent Child and Grouping

Devyansh's photo
Devyansh
·

2 min read

Parent Child and Grouping

Photo by Sigmund on Unsplash

Table of contents

No heading

No headings in the article.

They're abundant features in VS code editor from which Parent-child and grouping are well known, making a various parent and child tags takes minutes to make but there is an emmet that makes it a game of seconds. I mean just like boiler plate we can create something like this in seconds:

Ignore the pattern and repetition of tags, but observe the number of tags that have been created within 5 seconds. It really eases our work. So, let's know the magic behind it.

If you see any programmer doing speedy coding then he or she using an emmet. Yes, emmet, various emmets are used to get the desired type to a grouping of tags which are as follows:

  1. Parent-Child: In this, the succeeding tags can be created using this emmet (div>div>p>li) which somewhat looks like this on clicking enter button.

     <body>
     <div>
         <div>
             <p>
                 <li></li>
             </p>
         </div>
     </div>
 </body>

  2. Siblings: Here the sibling refers to the creating same tag inside the parent tag. Hence the emmet required for this is: (div>div>p+p+p). Using this kind of emmet we can achieve this type of result:

<body>
    <div>
        <div>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>

</body>
  1. Multiplication: If we want any tag more than 1 time consecutively the emmet used is (div>div>p*7). The output will be:
<body>
    <div>
        <div>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>

</body>
  1. Grouping: This emmet is used to group html tags to get desired order of tags such as (div>(div>p>ul>li*3)>section). The result will be:
<body>
    <div>
        <div>
            <p>
                <ul>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </p>
        </div>
        <section></section>
    </div>

</body>

Note: This is just an example with few tags this is applicable for all tags in Vs Code editor.

tagsWeb DevelopmentHTML5Emmettricks