Bir önceki yazımda verdiğim örnekler anlaşılabilmesi için biraz uzuncaydı ; bu yüzden ikinci yazıma geçtim. Öncelikle anlayışınız için teşekkür ederim.

Şimdi kaldığımız yerden devam edelim parantez yapısını ve + ile nested yapıda birden fazla farklı nesneyi ya da tagı eklemeyi gördük ama bazı durumlarda eklemek istediğimiz tag sonda olması gerekir ve düzenlerken tagın bir üstüne eklme yapmak gerekebilir bunun için “^” işaretlemesini kullanırız. Örnek :

div+div>p>span+em 

Yukarıdaki kod ile 2 ayrı div ve ikinci div tagının altında bir paragraf ve o paragrafın içinde iki ayrı tag göreceksiniz ; sonuç şu olacak :

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

Peki ben alt öğe yani Chilad yapısını bozmadan bir üste bir nesne eklemek istersem nasıl yaparım derseniz o kodda yukarıda bahsettiğim “^” işareti ile yapılabilir. Önce Kod :

div+div>p>span+em^img

Ve sonuç :

    <div></div>
    <div>
    	<p><span></span><em></em></p>
    	<img src="" alt="">
    </div>

Peki bu “^” işareti tagı daha yukarı taşır mı ? Cevap : “Evet “

div+div>p>span+em^^^img

    <div></div>
    <div>
    	<p><span></span><em></em></p>
    </div>
    <img src="" alt="">

Bu arada “()” ile gruplama da daha önceki örneklerde anlattığım gibi. Her nesne grubunu bir tag gibi yönetebilirsiniz.

Gelelim zurnanın son deliğine , birazda en kıymetli ve tasarım için en değerli noktaya.

div#header+div.page+div#footer.class1.class2.class3

Yukarıda ki örnekte “#” işareti ile “header” ID li bir div oluşturuyoruz.

Tag dan sonra konan “.” işareti ile “page” tanımlı bir CLASS oluşturuyoruz.

Ayrıca dikkat ederseniz birden “footer” ID si ile “class1” , “class2” ve “class3” argümanlarını CLASS içerisinde bir kerede oluşturabiliyoruz.

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

Elbette tek satırlar için değer mi değmez mi sorusuna geldiyseniz bence bir tag/elementi açıp kapamak için bile kullanılabilir. Bir müddet zaman sonra eliniz o kadar alışacak ki Emmet’den vazgeçebileceğinizi sanmıyorum.

style{table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;} td{border: 1px solid #dddddd;text-align: center;padding: 8px;} tr:nth-child(even){background-color: #dddddd;} #header{background:black;color:white;}}+table>(tr>td#header[colspan="3"]{White on Black})+(tr>td{data$$$}*3)*5

Biraz karışık bir kod yazdım ama bu kodlama ile ne kadar ileriye gidebileceğinizi göstermek istedim. Sonuç ise :

    <style>
    table {font-family: arial, sans-serif;border-collapse: collapse;width: 100%;} 
    td{border: 1px solid #dddddd;text-align: center;padding: 8px;} 
    tr:nth-child(even){background-color: #dddddd;} 
    #header{background:black;color:white;}
    </style>
    <table>
    	<tr>
    		<td id="header" colspan="3">White on Black</td>
    	</tr>
    	<tr>
    		<td>data001</td>
    		<td>data002</td>
    		<td>data0d03</td>
    	</tr>
    	<tr>
    		<td>data001</td>
    		<td>data002</td>
    		<td>data003</td>
    	</tr>
    	<tr>
    		<td>data001</td>
    		<td>data002</td>
    		<td>data003</td>
    	</tr>
    	<tr>
    		<td>data001</td>
    		<td>data002</td>
    		<td>data003</td>
    	</tr>
    	<tr>
    		<td>data001</td>
    		<td>data002</td>
    		<td>data003</td>
    	</tr>
    </table>

Daha detaylı bilgi almak ve iyice öğrenmek adına websitesini ziyaret edebilirsiniz ayrıca muhakkak Emmet CheatSheet‘e de göz atmalısınız

Kaynak ve bilgi : Emmet.io