YoRuMSuZ
Biz işimize bakalım...
CSS'te sıkça karşılaştığımız
Burada
Karmaşık Seçicilerde Esneklik: Daha karmaşık seçicilerde de
Bu örnekte,
Daha Karmaşık Örnek:
Bu örnekte,
Özetle:
CSS'teki
&:hover seçicisindeki & sembolü, özellikle başlangıç seviyesindeki kullanıcılar için kafa karıştırıcı olabilir. Gelin birlikte bu sembolün ne işe yaradığını ve neden kullanıldığını inceleyelim.& Sembolünün Anlamı
CSS'te& sembolü, şu anki seçiciyi temsil eder. Yani, hangi seçici içinde kullanılırsa, o seçicinin kendisini ifade eder. Bu, özellikle daha karmaşık seçiciler ve iç içe geçmiş stil tanımlamalarında oldukça kullanışlıdır.&:hover Seçicisinde & Neden Kullanılır?
- Kısaltma ve Okunabilirlik:
&:hoverseçicisi aslında.label.label--pack-a:hovergibi daha uzun bir seçiciyi kısaltmanın bir yoludur. Burada&sembolü,.label.label--pack-aseçicisinin tekrar yazılmasını engeller ve kodu daha okunaklı hale getirir. - İç İçe Seçicilerde Kullanım: Örneğin, bir elementin içindeki tüm bağlantılara hover efekti vermek isterseniz:
CSS:
.my-container a:hover {
color: blue;
}a seçicisi, .my-container içindeki tüm bağlantıları hedefler. & sembolü olmadan bu seçiciyi yazmak daha karmaşık olurdu.Karmaşık Seçicilerde Esneklik: Daha karmaşık seçicilerde de
& sembolü, tekrar eden kısımları kısaltarak kodu daha yönetilebilir hale getirir.Örneklerle Anlayalım
Basit Örnek:
CSS:
.button {
background-color: #f0f0f0;
&:hover {
background-color: #ccc;
}
}.button sınıfına sahip bir elementin üzerine gelindiğinde arka plan rengi griye döner. &:hover seçicisi, .button seçicisinin üzerine gelme durumunu ifade eder.Daha Karmaşık Örnek:
CSS:
.nav-item {
&:hover {
background-color: #f0f0f0;
& > a {
color: blue;
}
}
}.nav-item sınıfına sahip bir elementin üzerine gelindiğinde hem kendi arka plan rengi değişir hem de içindeki doğrudan alt öğe olan a etiketlerinin (linklerin) rengi maviye döner. İkinci & sembolü, .nav-item:hover durumunda geçerli olan bir seçici oluşturur.Özetle:
CSS'teki
& sembolü, mevcut seçiciyi temsil ederek, özellikle iç içe geçmiş seçicilerde ve hover durumlarında kod yazımını kolaylaştırır ve okunabilirliği artırır. Bu sayede daha karmaşık stil tanımlamaları daha basit bir şekilde yapılabilir.
