CSS - first-child ve last-child Kullanımı

Tablo veya Listelerin İlk ve Son Satırlarına Farklı Stil Uygulama

Sayfamızda kullandığımız bir tablo ya da listenin ilk ve son satırlarının farklı görünmesini istiyorsak first-child ve last-child pseudo sınıflarını kullanabiliriz.

Örnek:

tr:first-child { font-weight:bold;
                       background-color:gray; }

tr:last-child { background-color:white; }

Aynı şeyi ul ve ol listeleri için de yapabiliriz:

li:first-child { font-weight:bold; 
                      background-color:gray; }

li:last-child { background-color:white; }

Ayrıca aşağıdaki gibi kullanımları da mevcuttur:

tr:first-child(-n+2) { font-weight:bold; 
                     background-color:gray; }

tr:first-child(2n+1) { font-weight:bold; 
                     background-color:gray; }

Her satırı farklı görünümde yapmak için öncek konumuzu inceleyebilirsiniz.

tablo ilk son satırını farklı yapma gösterme, ul liste ilk son satırı farklı görünüm yapma, css first last child kullanımı örnekleri

KONU İLE İLGİLİ ÖRNEKLER

Ol ve Ul - İlk Satırına Farklı Stil Uygulama Kendin Dene

li:first-child { font-weight:bold;
                       background-color:gray; } /* ilk satırın özellikleri */

li:last-child { background-color:white; } /* diğer satırların özellikleri */

Tabloların İlk Satırına Farklı Stil Uygulama Kendin Dene

tr:first-child { font-weight:bold;
                       background-color:gray; } /* ilk satırın özellikleri */

tr:last-child { background-color:white; } /* diğer satırların özellikleri */



YORUMLAR




15904  kez okundu.

Online Kullanıcı Sayısı 3740



CSS-first-child-ve-last-child-Kullanımı