Hey There, Series1 make your writing code faster in 2X speed right. I swear to you that contiguous series will change your current speed will be doubling😊. Now, Looking for little tricky Emmet syntax. Though, which does not make you feel freaky. Let's get this ride on the road🎉.
Table Of Contents
- Class and id generator
- climb-up the elements
- Generating text
- Numbering the item
- Lorem ipsum generator🎉
- Bonus Secret info😉😉
Class and id generator
Hope you know in CSS, Use . for class and Use # for id right. The same mechanism followed in Emmet world because try to avoid making you fatigue.
If you want to generate class, Use .
a.button>span.button__prepend+span.button__body
If you want to generate id, Use #
a#button>span#button__prepend+span#button__body
You can also combine class and id
form#search.wide
Climb-up the elements
sometime we need to uplift the element to one or two or more levels. By that situation, Just use ^ for uplift to one level or need to uplift for 2 levels then use ^^.
If you cant find the symbol
^, Chill which is in number 6 button. pressshift + 6
If you can't get the concept, Don't get stressed. You will grasped the point by example below.
div.container>p^div.containerTwo
If you want div.containerTwo to uplift for one level (use ^) which is sibling to div.container. Really interesting right😲😲.
In simple words, how many level you want to uplift, increase the
^.
For another instance,
div.container>div.sub-container>p+span^^div.containerTwo
If you want div.containerTwo to uplift for two levels (use ^^) which is sibling to div.container.
Generating Text
Often need to gave plenty of text inside the elements and that plenty of text render in the browser. We can generate that text using {}.
For instance,
ul>li{item name}*5
Use this feature like
ul>li{item$}*5
Numbering the item
You can numbering the item in single or more digit by Emmet syntax. you know numbering the item by using $. Which is fine to single digit. If you need 2 digit numbering, how to do??.
Simple, use $$ for 2-digit numbering which means how many digit you want, increase the $.
For instance,
ul>li.item$$*5
Lorem ipsum generator
This is the most stunning feature which make painless effort to searching dummy content before the copy we received from the concern team. Seems cheerful feature right😍.
Just type
loremfollowed by number which convey how many words need to be generated,
p>lorem10
Bonus Secret info😉😉
Before leak the secret, let me ask a question "How to create div with container class??🤔". I get your answer from your brain secretly😁 which is div.container right. Nothing wrong with your answer which is 💯 right.
But, There is another way to do that. Just type .container and hit enter or tab, Emmet guy have auto-sense which generate
if you may use this feature like,
ul>.item$*4
observe the output closely, li generated automatically. Can't believe the feature like magic🪄.
Hope we will meet on upcoming series😊
If you loved this blog, Then give an endearing heart💝and drop your thought about this blog😍 which really a lot to me. I love the discussion with you, If you feel not comfortable at styling concepts or have any doubts.
If you not experiment with A new two-value syntax for display property, Start to explore now.
Thanks for Reading!!
Preethi
- Make your CSS life easier
Top comments (1)
Cool