GELİŞMİŞ CSS SEÇİCİLER 1 (TORUN, ÇOCUK VE KARDEŞ SEÇİCİLER)

CSS ile hiyerarşik yapıdaki bir HTML kodlarındaki nesnelere torun, çocuk ve kardeş isimli gelişmiş seçiciler ile ulaşılabilir. Bu seçiciler için boşluk, > + ve ~ karakterleri kullanılılır.

Torun Seçiciler

Torun seçicileri kullanmak için boşluk karakteri kullanılır.
Örnek: div li yazıldığında div içindeki tüm li elemanları seçilir.

Çocuk Seçiciler

Çocuk seçicileri kullanmak için > karakteri kullanılır.
Örnek: div > li yazıldığında div içindeki ilk seviyedeki tüm li elemanları seçilir.

Kardeş Seçiciler

İlk kardeş seçici ve tüm kardeşleri seçici olarak ikiye ayrılır. İlk kardeş seçiciyi kullanmak için + karakteri kullanılır.
Örnek: div + li yazıldığında div ile aynı seviyede bulunan ilk li elemanı seçilir.Diğer li elemanları seçilmez.
Tüm kardeş seçici için ise ~ elemanı kullanılır.
Örnek: div ~ li yazıldığında div ile aynı seviyede bulunan tüm li elemanları seçilir.
Aşağıdaki yapının HTML kodları şu şekildedir. <div id="kutu1"> <p> <a href="http://www.frontendokulu.com">frontend okulu</a> <strong>Kalın Yazı</strong> <strong>Kalın Yazı2</strong> </p> <span>Span 1</span> <ul> <li>Liste 1</li> <li>Liste 2 <em>Eğik yazı</em> <strong>Kalın yazı <span>Span 2</span> <em>Eğik yazı2</em> </strong> <br> <span>Span3</span> </li> </ul> </div> Torun Seçici : Örnekte #kutu1 em yazıldığındığında kutu1 in içindeki tüm em elemanları seçilir.
Çocuk Seçiçi :Örnekte li > span yazıldığındığında li nin içindeki ilk seviyedeki tüm span'lar seçilir.
İlk Kardeş Seçici : Örnekte a + strong yazıldığındığında a elemanının yanındaki ilk strong seçilir.
Tüm Kardeş Seçici : Örnekte a ~ strong yazıldığındığında a elemanının yanındaki tüm strong nesneleri seçilir.


Yorumlar


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

Hakkımızda

Bu site, website tasarımı yapılırken frontend(ön yüz) teknolojileri hakkında kısa anlatım ve örnekler paylaşmak amacıyla hazırlanmıştır.

Web tasarımda şu an için en sık kullanılan dil ve frameworkler HTML, CSS, JQUERY ve BOOTSTRAP olması sebebiyle bu alanların üzerinde örnekler ve çalışmalar olacaktır.

İletişim

  • info@frontendokulu.com