CSS Dersleri
Temel Bilgiler
CSS Nedir?
CSS Kod Yapısı
CSS ID ve Class Seçimi
CSS Nasıl Eklenir?

CSS Stilleri
CSS Arkaplanlar
CSS Yazılar
CSS Yazı Tipleri
CSS Bağlantılar
CSS Listeleme
CSS Tablolar

Kenarlıklar
CSS Kutu Modeli
CSS Kenarlıklar (Border)
CSS Dış Kenarlık (Outline)
CSS Dıştan Boşluk (Margin)
CSS İçten Boşluk (Padding)

CSS İleri Düzey
CSS Gruplama ve Üzerine Yazma
CSS Sınırlamalar
CSS Gösterme - Gizleme
CSS Pozisyon Belirleme (position)
CSS Kaydırma (float)
CSS Hizalama (align)
CSS Özel İfadeler (Pseudo)
CSS Transparanlık (opacity)
CSS Çıktı Türleri (media)
CSS Özellik Seçimi (Attribute)
CSS'ye Genel Bakış

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

CSS Özel İfadeler (Pseudo)



ElementLerin Alt Özellikleri

HTML'de A kodu belli durumlarda belli stiller alabilir. Örneğin fare ile üzerine gelindiğinde (hover) veya ziyaret edildiğinde (visited) farklı farklı stiller kullanmak gerekebilir. İşte bu tarz kullanımlar CSS nin özel kullanımlarıdır.

Pseudo Class olarak ifade edilen bu kullanımda seçimden hemen sonra iki nokta (:) kullanılır ve alt özellik belirtilir. Örneğin aşağıdaki kod tüm linklerin tüm alt özellikleri için geçerli olacaktır:

      a { color: #FF0000; }
   

Ancak aktifken, üzerine gelindiğinde ya da ziyaret edilmişse nasıl görüneceğini ayrı ayrı şu şekilde belirtebiliriz:

      a:link {color:#FF0000;}    /* ziyaret edilmemiş */
      a:visited {color:#00FF00;} /* ziyaret edilmiş */
      a:hover {color:#FF00FF;}   /* fare üzerinde */
      a:active {color:#0000FF;}  /* seçilmişse */
   

Eğer kendi belirlediğimiz bir stilde bu alt özellikleri biçimlendireceksek elementten sonra stil adını nokta ile ayırarak yazmalıyız:

      a.kirmizi:visited {color:#FF0000;}
   

İlk Elemente Özel Stil Belirleme

Aynı elementten birden çok kullandığımız bir yerde sadece ilk elementin diğer elementlerden farklı görünmesi için first-child alt özelliğini kullanırız. Örneğe bakalım:

<html>
 <head>
 <style type="text/css">
    p:first-child i { color:blue; }
 </style>
 </head>

 <body>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
  <p>Ben <i>güçlü</i> biriyim. Ben <i>güçlü</i> biriyim.</p>
 </body>

</html>
   

Yukarıdaki kodu bir not defterine yapıştırıp sonunu .html olarak kaydedin ve açın. Göreceksiniz ilk "güçlü" yazısı mavi renkle yazılmış. Bunu diğer tüm elementlerde de kullanmanız mümkündür.

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014