& nesting selector
& nesting seçicisini öğrenirsin.
& nesting seçicisi
İçeride & işareti, dıştaki seçicinin tam adını temsil eder. Buna nesting seçicisi denir. .button { &:hover { color: navy; } } yazımı, .button:hover { color: navy; } ile aynı anlama gelir.
& olmadan yazarsan tarayıcı seçicileri boşlukla birleştirir: .button { :hover { } } yanlış bir şekilde .button :hover olur; bu, düğmenin içindeki bir öğenin üzerine gelmesi anlamına gelir. & doğru hedefi korur.
& ne zaman şart?
Torun ilişkisi için & şart değildir: .card { p { } } zaten .card p olur. Ancak sözde sınıflarda, sözde öğelerde ve sonek eklemelerinde & gereklidir.
Örneğin .btn { &-primary { } } yazımı .btn-primary seçicisini üretir. Bu, BEM benzeri adlandırmayı doğal CSS'te mümkün kılar; önişlemciye ihtiyaç bırakmaz.
Uygulama Düğme için hover ve primary ekle
.btn seçicisinin içine iki nested bölüm ekle: birincisi &:hover sözde sınıfı, içine color: navy; ikincisi &-primary sonek seçicisi, içine background: blue.
Örnek çözümü göster
.btn bloğunun içine iki bölüm ekle.
Örnek çözüm:
/* .btn içine hover ve primary ekle */
.btn {
border: none;
&:hover {
color: navy;
}
&-primary {
background: blue;
}
}Kendini test et
-
&:hover yaz
.button { ____ { color: navy; } }Cevabı göster
.button { &:hover { color: navy; } } -
& neyi temsil eder?
.button { &:hover { color: navy; } }- Dıştaki seçicinin tam adını (.button)
- Sayfadaki tüm öğeleri
- Yalnızca düğmenin içindeki metni
- Bir sonraki kardeş öğeyi
Cevabı göster
Dıştaki seçicinin tam adını (.button) — Doğru. & dıştaki .button seçicisinin adını temsil eder; &:hover .button:hover olur.
-
Nesting yazımını anlamına eşle
- .card { p { } }
- .card p
- .card { &:hover { } }
- .card:hover
- .btn { &-primary { } }
- .btn-primary
- .card { &.active { } }
- .card.active