Bir kart ızgaranız olduğu ve bunların birbiri ardına kaybolmasını istediğiniz şeyi biliyor musunuz? Bu kademeli kademeli etki. Harika görünüyor. Basit olmalı. Ve yine de onu her inşa ettiğimde, uygulama bana temelde aptalca bir şey yapıyormuşum gibi hissettirdi.
Mevcut spesifikasyon yalnızca sayılırtümüunsur kardeşleri. Ancak CSSWG, planlanan bir uzantıyı belgelemiştir.sayı #9572Bir/<selector>argüman, neyi eşleştirme:nth - child()zaten destekliyor.
Gibi bir şey deneyinsibling - index (of .active)yalnızca belirli bir seçiciyle eşleşen kardeşleri saymanıza izin verir. Genel olarak sekizinci çocuk ama üçüncü olan bir unsurAktifçocuk geri dönecekti3. Görünürlüğü filtrelediğiniz veya değiştirdiğiniz dinamik kullanıcı arayüzleri için bu, DOM manipülasyonu gerektirmeden dizini sıralı tutacaktır.
Çevresinde CSSWG tartışmaları da olduÇocuk sayısı ve descendant - count ()fonksiyonlar — ilki size bir öğenin kaç çocuğa sahip olduğunu söyler (ebeveyn odaklı düzenler için yararlıdır), ikincisi tüm alt öğeleri özyinelemeli olarak sayar. Her ikisi de hala teklif aşamasındadır, ancak ağaç sayma hikayesini tamamlarlar:sibling - index () ve sibling - count ()size yatay görünümü verirken (akranlarım arasında neredeyim?),Çocuk sayısı ve descendant - count ()size dikey görünümü verir (altımda ne var?).
En üstte bahsettiğim duygu — on yazmak:nth - child()aşamalı bir animasyon için kurallar ve bariz bir şeyi kaçırıp kaçırmadığınızı merak ediyor musunuz? Sen değildin. Bariz olan şey henüz yoktu.
