CSS Seçiciler(Selector)-1

HTML belgesinde nesneleri seçmek için CSS’de kullanılan birçok seçici bulunmaktadır. Tüm bu seçicilere sırasıyla bakalım.

 

1) Evrensel Seçici (*)   

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

/*
 * Tüm nesnelerin rengini mavi yapar.
 */
* {
     color: blue
}

  

b) Bir nesne içerisindeki tüm nesneleri seçer.

/*
 * lifeacode divinin içindeki tüm nesneleri seçer ve yazıların altını çizer.
 */
div.lifeacode * {
     text-decoration: underline
}

 

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

Id’si x’e eşit olan nesneleri seçer.

/*
 * id'si lifeacode paragrafı seçer ve rengini mavi yapar.
 */
p#lifeacode{
     color: blue
}

 

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

Class niteliği x’e eşit olan nesneleri seçer.

/*
 * class özelliği lifeacode olan a nesnesini seçer ve rengini sarı yapar
 */
a.lifeacode{
     color: yellow
}

 

4) Torun Seçici(X   Y)   

X nesnesi içerisindeki Y nesnesini seçer.

/*
 * ornek isimi bir sınıf tanımladık ve altına n isimli bir nesne tanımladık, rengini ise mavi yaptık.
 */
.ornek n {
     background-color: blue
}

 

5) Basit Seçici (X)   

Doğrudan x nesnesinin seçimini yapar.

/*
 * a nesnesini seçer alt çizgileri yok eder.
 */
a {
     text-decoration: none
}

 

6) Sözde Sınıf Seçiciler (X)   

a) :link seçicisi daha önce tıklanmamış linkler üzerinde işlem yapmamızı sağlar.

/*
 * a nesnesinin arka plan rengini mavi yapar.
 */
a:link {
     background-color: blue
}

  

a) :visited seçicisi daha önce tıklanan(ziyaret edilen) linkler üzerinde işlem yapmamızı sağlar.

/*
 * a nesnesinin arka plan rengini turuncu yapar.
 */
a:visited {
     background-color: orange
}

 

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

X ve Y nesnesini birlikte seçer.

/*
 * ul nesnesi ile p nesnesini birlikte seçer.
 */
ul+ p {
     color: blue
}

 

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

X ve Y nesnesini birlikte seçer.

/*
 * Sınıfı sehir olan ul içindeki li nesnelerine kenarlık ekler.
 */
ul.sehir> li {
     border: 2px solid #000
}

 

9) X ~ Y Seçici   

Bitişik seçici’den farklı olarak, X nesnesi altındaki tüm Y (ebeveyn) nesnelerini seçer.

/*
 * ul nesnesi altındaki tüm p nesnelerinin rengini mavi yapar.
 */
ul ~ p {
     color: blue
}

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

X nesnesinde Y niteliği bulunan nesneleri seçer.

/*
 * a nesneleri içerisine title niteliği 
 */
a[title] {
     color: red
}
Benzer Konular:

CSS Seçicileri(Selector)-2 sayfasına ulaşmak için tıklayın

CSS Seçicileri(Selector)-3 sayfasına ulaşmak için tıklayın

CSS Seçicileri(Selector)-4 sayfasına ulaşmak için tıklayın



Kimler Neler Demiş?

avatar
  Subscribe  
Bildir