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
lorem
followed 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