CSS: Seçiciler (1 ~ 10)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

1) * (Evrensel Seçici)
2) #X (ID “Tekil” Seçici)
3) .X (Sınıf Seçici)
4) X Y (Torun Seçici)
5) X (Basit Seçici)
6) X:link ve X:visited (Sözde Sınıf Seçicileri)
7) X + Y (Bitişik Seçici)
8) X > Y (Çocuk Seçici)
9) X ~ Y
10) X[Y] (Nitelik Seçici)

HTML sayfasında nesneleri seçmek için CSS’de bir çok seçici bulunmaktadır.. Sırasıyla tüm bu seçicileri öğreneceğiz ancak bölümler halinde öğreneceğiz.. Bu bölümde aşağıdaki seçicileri öğreneceğiz;

1) * (Evrensel Seçici)

Tüm nesneleri seçmek için kullanılır.

/*
 * tüm nesneleri seçer ve rengini kırmızı yapar
 */
* {
     color: red
}

.. ya da bir nesne içerisindeki tüm nesneleri seçmek için ..

/*
 * divlerden sınıfı erbilen olan divin içindeki tüm nesneleri
 * seçer ve yazıların altını çizer
 */
div.erbilen * {
     text-decoration: underline
}

Tarayıcı Desteği

IE6+, Firefox, Chrome, Safari, Opera

2) #X (ID “Tekil” Seçici)

Id niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen id'li paragrafı seçer ve rengini kırmızı yapar
 */
p#erbilen {
     color: red
}

Tarayıcı Desteği

IE6+, Firefox, Chrome, Safari, Opera

3) .X (Sınıf Seçici)

Class niteliği x’e eşit olan nesneleri seçmek için kullanılır.

/*
 * erbilen sıınflı a nesnesini seçer ve rengini mavi yapar
 */
a.erbilen {
     color: blue
}

Tarayıcı Desteği

IE6+, Firefox, Chrome, Safari, Opera

4) X Y (Torun Seçici)

X nesnesinde bulunan Y nesnelerini seçmek için kullanılır.

/*
 * test sınıflı nesne içerisinde bulunan
 * a nesnesini seçip arka plan rengini sarı yapar
 */
.test a {
     background-color: yellow
}

Tarayıcı Desteği

IE6+, Firefox, Chrome, Safari, Opera

5) X (Basit Seçici)

Herhangi bir niteliği olmayan doğrudan X nesnesini seçmek için kullanılır.

/*
 * a nesnelerini seçip alt çizgilerini kaldırır
 */
a {
     text-decoration: none
}

Tarayıcı Desteği

IE6+, Firefox, Chrome, Safari, Opera

6) X:link ve X:visited (Sözde Sınıf Seçicileri)

Daha önce tıklanmamış linkler üzerinde işlem yapmak için :link seçicisi kullanılır.
Ziyaret edilen (tıklanan) linkler üzerinde işlem yapmak için ise :visited seçicisi kullanılır.

/*
 * Tıklanmamış a nesnelerini seçip
 * arkaplan rengini sarı yapar
 */
a:link {
     background-color: yellow
}
/*
 * Ziyaret edilmiş a nesnelerini seçip
 * arkaplan rengini mor yapar
 */
a:visited {
     background-color: purple
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

7) X + Y (Bitişik Seçici)

X nesnesinden hemen sonra gelen Y nesnesini seçmek için kullanılır.

/*
 * ul nesnesinden hemen sonra gelen p nesnesini
 * seçer ve yazı rengini kırmızı yapar
 */
ul + p {
     color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

8) X > Y (Çocuk Seçici)

X Y (Torun Seçici) den farklı olarak, X > Y (Çocuk Seçici) doğrudan X nesnesinin içinde bulunan Y çocuk nesnelerini seçmek için kullanılır.

/*
 * Sınıfı liste olan ul içinde bulunan
 * li çocuk nesnelerini seçip kenarlık ekler
 */
ul.liste > li {
     border: 1px solid #ddd
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

9) X ~ Y

X + Y (Bitişik Seçici)’den farklı olarak bu seçici, X nesnesinden sonra gelen tüm Y (ebeveyn) nesnelerini seçmek için kullanılır.

/*
 * ul nesnesinden sonra gelen p (ebeveyn) nesnelerini
 * seçer ve renklerini kırmızı yapar
 */
ul ~ p {
     color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

10) X[Y] (Nitelik Seçici)

X nesnesine ait Y niteliği bulunan nesneleri seçmek için kullanılır.

/*
 * a nesneleri içerisine title niteliği 
 * bulunanları seçip rengini kırmızı yapar
 */
a[title] {
     color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

(11~20) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS: Seçiciler (1 ~ 10)” üzerine 23 yorum

  1. Konu gerçekten güzel. Bende senin gibi ~ işaretini kopyala yapıştır yapıyordum saol öğrendim onuda sayende. Güzel bir video olmuş..

  2. Normal "background-color" ve "background" arasındaki ilişki farkı nedir yani ikiside aynı işlevi görüyor ama hangisini kullanmak daha mantıklı ?

  3. @Ceyhun Emre, background-color arkaplan rengi tanımlamak için, background ise tüm arkaplan özelliklerini tanımlamak için kullanılır. Eğer sadece renk tanımı yapacaksan background-color kullanabilirsin.

  4. @Orhan BAHAR, seo benim için önemli değil 🙂 seo'ya inanmam, güvenmem, işim olmaz.

  5. @Orhan BAHAR oradaki istatistikler pek güvenli değil zaten, google'ın seo puanıda 70 görünüyor 🙂

  6. Abi çok teşekkür ederim emeğine sağlık yanlış anlamassan acaba bir sonraki dersi ne zaman yayınlayacaksın ?

  7. Tayfun abi bunların isimlerini nereden buluyorsun ya ? İsimlerini görünce bilmediğim şeylermiş gibi geldi birden.

  8. @Davut KARA, valla ingilizceden çeviriyorum ama ne kadar doğru ve gerçekçidir şüpheliyim 😀 İsimlerin bir önemi yok zaten, sen de ahmet ben diyeyim mehmet 😛

  9. @Cemil Sevim, eyvallah çok sağol.. Türkçe karşılığı da "yaklaşık işareti" imiş, benim gibi bilmeyenlere duyurulur 🙂

  10. @hasan mutlu, "a.erbilen" linkler içinde erbilen sınıfı olanları seçer.. ".erbilen a" ise sınıfı erbilen olan her nesne içindeki a nesnelerini seçer.. Yani bariz bir fark vardır aralarında 🙂

  11. 9. anlatımdaki işaretin matematikteki anlamı yaklaşık,yaklaşık olarak demek. eğer onu sorduysanız..

  12. hocam bunlar iyi de bir de a etiketinin title özelliğini nasıl şekillendirebiliriz onu anlatsanız çok aradım bulamadım bir türlü yanidaha açık ifade edeyim bir resme link verdiğimiz zaman bu resmin üzerine gelince bir yazı çıkıyor title ile yapıyoruz bunu buraya kadar sıkıntı yok ancak bu yazının atıyorum dikdörtgen içinde siyah renkli değil de kenarları yumuşatılmış dikdörtgen içinde mesela kırmızı renkle yazmasını istersek eğer nasıl yapacağız??

  13. Merhabalar;
    <div id="birinci"></div><div id="ucuncu"></div>

    Yukarıdaki sıralama tüm sayfalarımda mevcut. Fakat anasayfamda şu şekilde;

    <div id="birinci"><div id="ikinci"></div></div><div id="ucuncu"></div>

    Burada tek fark #birinci etiketinin içinde #ikinci etiketinin bulunması. Yapmaya çalıştığım ise #ikinci etiketinin bulunduğu sayfada #ucuncu etiketinin olduğu sınıfı gizlemek. Bir türlü çözüm bulamadım.
    Yardımcı olabilir misiniz?

  14. Merhaba @Selman,
    Ne yazık ki henüz css'de parent seçicisi bulunmuyor. Daha doğrusu css4 ile birlikte geleceğinden henüz desteklenmiyor.
    Bu yüzden şimdilik sorunu jquery ile çözebilirsin.

    var ikinci = $('#ikinci').length;
    if ( ikinci ){
        $('#ucuncu').hide();
    }

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir