CSS nesting nedir?
CSS native nesting sözdizimini öğrenirsin.
CSS nesting nedir?
CSS nesting, bir seçiciyi başka bir seçicinin süslü parantezleri içine yazmaktır. Tarayıcı içteki bölümü, dıştaki seçicinin çocuğu olarak çözümler. Yani .card { h2 { color: navy; } } aslında .card h2 { color: navy; } anlamına gelir.
Bu yapı Sass gibi önişlemcilerden tanıdık gelebilir; artık doğrudan CSS'te çalışır. Bir öğenin kendisi, çocukları ve sözde sınıfları tek bir blokta toplanır; stil sayfası HTML yapısına paralel gider.
Neden nesting kullanılır?
Nesting olmadan bir bileşene ait stiller dosyada dağınık durur: .card, .card h2, .card p ayrı ayrı yazılır. Nesting ile tümü .card bloğunda toplanır.
Stil sayfası HTML yapısına paralel gider; bakımı kolaylaşır. Sass'taki .card__title gibi BEM adlarına da ihtiyaç azalır; .card { .title { } } yazmak yeter.
Torun birleştirici varsayılan
Nesting yazdığında tarayıcı içteki seçiciyi dıştakiyle torun birleştiricisiyle (descendant combinator) birleştirir. Yani nav { a { color: navy; } } çıktısı nav a { color: navy; } olur; nav içindeki her a öğesini yakalar.
İçteki öğenin doğrudan çocuk olması gerekmez; torun da olur. Doğrudan çocuk için > birleştiricisi ileriki derslerde işlenecek.
Uygulama Nested p için renk ata
.card seçicisinin içine bir p seçicisi ekle ve color: navy özelliğini ata. Dış blok zaten var; sen yalnızca içteki p bölümünü yaz.
Örnek çözümü göster
navy; yaz.
Örnek çözüm:
/* .card içine p ekle */
.card {
padding: 1rem;
p {
color: navy;
}
}Kendini test et
-
Hangi yazım geçerli nesting gösterir?
- .card { color: navy; }
- .card { h2 { color: navy; } }
- .card h2; { color: navy; }
- card h2 { color: navy; }
Cevabı göster
.card { h2 { color: navy; } } — Doğru. .card bloğunun içinde h2 seçicisi ayrı bir süslü parantez bloğu olarak yazılmış; tarayıcı bunu .card h2 olarak çözümler.
-
İçteki seçiciyi yaz
.card { ____ { color: navy; } }Cevabı göster
.card { h2 { color: navy; } }