GELİŞMİŞ CSS SEÇİCİLER 2 (EVRENSEL, ÖZELLİK VE SÖZDE SINIF SEÇİCİLER)

CSS ile hiyerarşik yapıdaki bir HTML kodlarındaki nesnelere evrensel, özellik ve sözde-sınıf  isimli gelişmiş seçiciler ile ulaşılabilir. Bu seçiciler için boşluk, *, [] ve : karakterleri kullanılılır.

Evrensel Seçici ( * )

Sayfada bulunan tüm HTML elemanlarını seçmek için kullanılır. Genelde varsayılan tüm padding ve margin özelliklerini temizlemek için kullanılır. * işareti ile kullanılır.

Örnek: * {margin:0px; padding:0px;font-family:Verdana;}

Sözde Sınıf Seçici ( : )

Sayfadaki nesnelerin varsayılan özellikleri dışında özelliklerini seçmek için kullanılır.
Örneğin a etiketinin üzerine gelme durumu(hover) veya input elemanlarının seçilme durumu(focus) gibi.
: işareti ile kullanılır.

Örnek : a:hover{ background: pink;} input:focus{color:red;}

Özellik seçici( [ ] )

HTML elemanlarının parametreleri ve bu parametrelerin özellikleri vardır.
Örnek :

<input type="text" name="isim"> yandaki nesnenin type parametresinin değeri text'dir.
Kullanım için [] işaretleri arasına istenen özellik yazılır. Aşağıda örnek verilmiştir.
Özellik seçiciler kullanılarak istenilen özelliğe sahip nesneler seçilebilir.Bu kullanımın avantajları şöyle açıklanabilir.
Örneğin formun içindeki inputları seçip arka plan rengi vermek istiyoruz. Bunun için input{background:black;} CSS kodunu yazarız.
Fakat bu kullanımda formdaki gönderme butonu olan submit de seçileceği için butonun rengi de değişir.
Bu durumu engellemek için özellik seçiciler kullanılabilir.

Örnek: input[type="text"]{background:black;}

Yukarıdaki örneğe göre yalnızca text özelliğine sahip elemanların arka planı değiştirilmiş olur.

Sözde Sınıf Çocuk Seçiciler ( :nth-child )

Çocuk seçicilerden farklı olarak, bir alt seviyede bulunan elemanlardan istenilen grup ayrı ayrı seçilebilir.
Örneğin ilk çocuk, son çocuk veya yalnızca çift sayıda olanlar seçilebilir.
Bir tabloda yapısında başlıkların bulunduğu satır ilk çocuk olması sebebiyle kolayca seçilebilir.
Ayrıca çift sayıda ve tek sayıda olan elemanların seçilmesi satır sayısı bilinmeyen tablolarda dahi zebra şeklinde biçimlendirme için çok kolay bir yöntemdir.

Örnek: tr:first-child{font-size:20px;}

Yukarıdaki örneğe göre yalnızca tablonun ilk satırının yazı büyüklüğü değiştirilmiş olur.

Örnek: tr:nt-child(2n){color:red;}

Bu örnekte ise 2 nin katları olan tüm satırların yazı rengi kırmızı olarak değiştirilmiş olur.


Yorumlar


Yorum yapabilmek ve kaynak kodları indirebilmek için lütfen üye girişi yapın