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;

  • * (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ç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ğiIE6+, 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ğiIE6+, 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ğiIE6+, 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ğiIE6+, 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ğiIE6+, 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 :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 (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ğiIE7+, 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ğ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] (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ğiIE7+, 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.

Bir cevap yazın

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