CSS Seçiciler ve Kullanımları

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;

• * (Evrensel Seçici)
• #X (ID “Tekil” Seçici)
• .X (Sınıf Seçici)
• X Y (Torun Seçici)
• X (Basit Seçici)
• X:link ve X:visited (Sözde Sınıf Seçicileri)
• X + Y (Bitişik Seçici)
• X > Y (Çocuk Seçici)
• X ~ Y
• 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ÇİCİ)

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ı ozcan olan divin içindeki tüm nesneleri
 * seçer ve yazıların altını çizer
 */
div.ozcan * {
     text-decoration: underline
}

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

2) #X (ID “TEKİL” SEÇİCİ)

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

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

Tarayıcı DesteğiIE6+, Firefox, Chrome, Safari, Opera

3) .X (SINIF SEÇİCİ)

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

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

4) X Y (TORUN SEÇİCİ)

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ğiIE6+, Firefox, Chrome, Safari, Opera

5) X (BASİT SEÇİCİ)

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ğiIE6+, Firefox, Chrome, Safari, Opera

6) X:LİNK VE X:VİSİTED (SÖZDE SINIF SEÇİCİLERİ)

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 :visitedseç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ğiIE7+, Firefox, Chrome, Safari, Opera

7) X + Y (BİTİŞİK SEÇİCİ)

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ğiIE7+, Firefox, Chrome, Safari, Opera

8) X > Y (ÇOCUK SEÇİCİ)

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ğiIE7+, 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ğiIE7+, Firefox, Chrome, Safari, Opera

10) X[Y] (NİTELİK SEÇİCİ)

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
}

Bir Önceki – Sonraki Ders