Üst düzey CSS seçicileri ve kullanımları

12 Ocak 2013 Cumartesi, 17:57 sularında İzni Burak Demirtaş tarafından #web konularında yazılmış.
Yazıldığından bu yana, 5148 kez okunmuş ve 1 yorum almış.

Daha önceki yazımda, CSS Seçicileri ve kullanımlarını anlatmıştım. Şimdi ise, CSS seçicilerinde üst düzey seçicileri göreceğiz. Üst düzey seçiciler; çocuk, torun, yan kardeş, evrensel ve özellik seçicilerdir. Şimdi sırasıyla bu seçicileri inceleyelim;


Çocuk Seçiciler

Bu seçiciler, herhangi bir elementin içerisinde kullandığımız, alt elementleri kapsar. Örnek verecek olursak; "div" elementini ebeveyn olarak düşünecek olursak, içerisindeki , "b" ve "a" elementleri "div" elementinin çocuğu olacaktır. Burada dikkat edilmesi gereken en önemli nokta; çocuk seçicilerin, ebeveyn elementin bir alt katmanını seçtiğidir. Yani, biraz önce verdiğimiz örneğe göre çocuk seçiciler ile veya elementinin içerisindeki başka elementlere erişemeyiz. 

<style type="text/css">
div > a { font-size: 14px; font-family: Tahoma; color: #FF0000; }
div > b { background: #0000ff; color: #ffffff; }
div > p { font-family: Verdana; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<div>
<b>CSS Çocuk seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
<p>
 <span>bu yazı biçimlendirmeden etkilenmez çünkü çocuk değil :) fakat, p elementinin çocuğu olduğu için, onun özelliklerinden etkilenebilir.</span>
</p>
</div>


Torun Seçiciler

Yukardaki örneğe göre devam edecek olursak, kullandığımız elementin iki düzey altında bulunan elementler, torun elementlerdir. Torun elementleri seçerken boşluk ile seçiyoruz. Örneğimize geçecek olursak;

<style type="text/css">
body a { font-size: 14px; font-family: Tahoma; color: #FF0000; }
html p span { background: #0000ff; color: #ffffff; }
div  b { font-family: Verdana; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<div>
<b>CSS Torun seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
<p>
 <span>bu yazı biçimlendirmeden etkilenmez çünkü çocuk değil :) fakat, p elementinin çocuğu olduğu için, onun özelliklerinden etkilenebilir.</span>
</p>
</div><br>

Buradaki kodlarımıza göre "body" elementi ikinci düzeyde bulunmuş oluyor (html > body). "a" elementi ise, dördüncü düzeydedir ve "body" elementinin torunudur. 


Yan Yana Kardeş Seçiciler

Yapılan kodlamaya göre aynı düzeyde ve yan yana  bulunan elementlerden, ikinci elementi seçer. Elementlerin yan yana olma durumlarını + karakteri ile belirliyoruz.

<style type="text/css">
b + a { font-size: 14px; font-family: Tahoma; color: #FF0000; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<div>
<b>CSS kardeş seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
</div><br>


Evrensel Seçiciler

Belirtilmiş element altındaki tüm diğer elementleri veya tüm elementleri seçmek için kulanılır. * karakteri ile kullanıyoruz.

<style type="text/css">
div * { background-color: #ff0000; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<div>
<b>CSS Evrensel seçiciler örneği</b>
<a href="http://burakdemirtas.org">burakdemirtas.org</a>
<span>örnek yazı</span>
<p>örnek paragraf</p>
</div><br>

Böylece "div" elementi altındaki diğer tüm elementlere arkaplan olarak kırmızı özelliği atadık.


Özellik Seçiciler

Elementlerin içinde bulundurduğu alt özelliklere göre elementlere stil verebiliriz. Örneğin, href özelliğinde burakdemirtas.org olan elementini seçebiliriz. 

<style type="text/css">
a[href="burakdemirtas.org"] { background-color: #000000; color: #ffffff; }
</style><br>

CSS Kodlarımıza göre HTML kodlarımızı yazacak olursak;

<a href="http://burakdemirtas.org/">burakdemirtas.org</a><br />
<a href="http://google.com/">google.com</a><br>

Buradaki örneğimize göre, linki burakdemirtas.org olan "a" elementinin arkaplanı siyah ve yazı rengi beyaz olacaktır. "a" etiketi için bazı özellik seçicilere aşağıdan ulaşabilirsiniz.


a[href] = href özelliği olan linkleri seçer. 
a[href="burakdemirtas.org"] = href özelliğinde burakdemirtas.org olan linkleri seçer. 
a[href^="www"] = href özelliği www ile başlayan linkleri seçer. 
a[href$="org"] = href özelliği org ile biten linkleri seçer. 
a[href!="burakdemirtas.org"] = href özelliği burakdemirtas.org olmayan linkleri seçer. 
a[href*="burakdemirtas"] = href özelliği içerisinde burakdemirtas bulunan linkleri seçer.


Yazımız bu kadar. Umarım faydalı olmuştur. Bir sonraki yazıda görüşmek üzere, sağlıcakla kalın :)


Yorumunu Gönder     Sende görüşünü yaz!

1 adet yorum yapılmış.   Sende yap!

ali demiş ki; 14 Mayıs 2016 Cumartesi, 01:26
Peki bi üst elementi nasıl seçtiririz.

Yine aylar olmuş ve buralarda gözükmüyorum. Ne zaman "buralara daha çok vakit ayıracağım, bol bol yazacağım" desem, kesin başka bir şeyler çıkıyor; işler, güçler, yoğunluklar vs, odaklanamıyorum. Öyle ya da böyle bunu bir düzene oturtacağım. inatçıyım bu konuda....

8 Temmuz 2018, 04:55   —   #genel   —   Yorum yok.   —   Devamını Oku »

Buraları yine oldukça aksatmış olmanın verdiği iç rahatsızlığı ile, geçen haftadan beri bir şeyler karalamaya olan isteğim ancak şu an vuku buluyor. Geçen hafta oldukça yoğun ve hareketli geçtiği için yazmaya vakit bulamadım aslında. Ya da ne bileyim, belki de bahane buluyorum......

27 Şubat 2018, 11:34   —   #genel   —   2 yorum var.   —   Devamını Oku »

Gidelim buradan...

"Gidelim buradan... Göğsünü sıkan, içini daraltan o laneti geride bırakıp gidelim. Burada yağmur bile güzel yağmıyor artık. Yağmuru güzel yağan bir yerlere gidelim....

5 Ocak 2018, 04:57   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »

$_2018 = new HappyYear();

Zamanın ne denli hızlı aktığını bilmiyorum ama, gerçekten "su gibi" akıp geçiyor deyimi doğru galiba. Ne ara 2018 geldi, kapımıza dayandı; hiç bir fikrim yok. Oysa ben daha tarih yazmak zorunda olduğum kağıtlara "2017" yazmaya bile alışmamıştım. Şimdi bir de 2018 çıktı başımıza. ...

31 Aralık 2017, 17:10   —   #genel   —   Yorum yok.   —   Devamını Oku »

İnsanın içindeki sıkıntıya bir isim, bir sebep bulamamasına hep şaşırmışımdır. Çok şaşırdığı ne varsa, bunları çok mu yaşıyor insanlar genelde hiç bilmiyorum. Ama bu en azından bende genelde böyle oluyor. Açık konuşayım mı? Birinin bir sözü vardı, ama kimindi hatırlamıyorum. Şöyle diyordu: "Kafamdan atamıyorum. Hep aklıma geliyor, hem de en tuhaf zamanlarda. Duştan çıkarken, sokakta yürürken, gece yatağıma yatarken; bilinçli olarak bir şey düşünmediğim zamanlarda."... Sanki hayat denen bu değişik alem içinde, bir yerlerde bu söz içerisinde bir yerlerde sıkışmış kalmış gibiyim. Nedenini bilmiyorum. Belki de biliyorum. Belki de bildiğimi bilmiyorum. Belki anlatamıyorum, belki anlatmak istemiyorum. Belki içimden atmak istiyorum. Belki de atamıyorum. Belki seviyorum, belki de yine seviyorum.. Bazen çok saçmalıyorum değil mi? Biliyorum. Sarhoş da değilim ama olmadığıma da beni kim ikna edebilir? Zaten sarhoşken de anlatamıyorum. Atamıyorum. Seviyorum. Neyse, belki de en iyisi uyumak.

11 Aralık 2017, 04:27   —   #karalamaca   —   3 yorum var.   —   Devamını Oku »

hello İstanbul!

Üniversite hayatını bitirdik. Aslında planım, elimdeki projeler ile ilgilenip bir yandan da sene sonuna kadar kafa dinlemekti. 2018 itibariyle iş-güç arayışlarına girişecek ve mutlu olabileceğim, bana bi'şeyler katabilecek, hem kendime hem onlara fayda sağlayacağım bir şirket bulmak için adımlar atacaktım. Tahmin edeceğiniz üzere planlar yine tutmadı....

6 Ekim 2017, 10:02   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »

Eylül'dü. 
Dalından kopan yaprakların, 
Sararan yanlarına yazdım adını. 
Sahte bir gülüşten ibarettin oysa. 
Ve hiç bilmedin ellerimin soğuğunu. ...

16 Eylül 2017, 17:13   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »
daha fazla göster