CSS: Pseudo/Sözde Elemanlar

Hüseyin Akdogan tarafından yazıldı.   

PDF olarak oku

Bu video dersinde CSS’te Pseudo/Sözde Elemanlar‘ın kullanımını örneklendirmeye çalıştım. Derste yer alan stil tanımlamaları aşağıdaki gibidir:

/*
   Sözde Elemanlar:
   HTML/XHTML elemanı olmasalar da,
   HTML/XHTML elemanı gibi davranabilen
   elemanlardır.
*/

/*
   Aşağıdaki atamayla sayfa
   içinde class özelliğine
   "tanim" değerini almış
   paragraf etiketleri seçilecek
   ve etiketin barındırdığı metnin
   ilk harfine tanımlanan stil
   tercihleri uygulanacaktır
*/ 

p.tanim:first-letter{
    color: gray;
    font-weight: bold;
    font-size: 40px;
    font-style: italic;
}

/*
   Aşağıdaki atamayla sayfa
   içinde class özelliğine
   "tanim" değerini almış
   paragraf etiketleri seçilecek
   ve etiketin barındırdığı metnin
   ilk satırına tanımlanan stil
   tercihleri uygulanacaktır
*/ 

p.tanim:first-line{
    font-weight: bold;
}

/*
   Aşağıdaki atamayla sayfa
   içinde class özelliğine
   "java" değerini almış
   li etiketleri seçilecek
   ve etiketin barındırdığı
   içeriğin öncesine, tanımlanan
   stil tercihlerini yansıtacak
   biçimde "Java Yazar: " ifadesi
   eklenecektir
*/ 

li.java:before {
      font-weight: bold;
      color: red;
      content: "Java Yazar: ";
}

/*
   Aşağıdaki atamayla sayfa
   içinde class özelliğine
   "js" değerini almış
   li etiketleri seçilecek
   ve etiketin barındırdığı
   içeriğin öncesine, tanımlanan
   stil tercihlerini yansıtacak
   biçimde "JavaScript Yazar: " ifadesi
   eklenecektir
*/ 

li.js:before {
      font-weight: bold;
      color: purple;
      content: "JavaScript Yazar: ";
}

/*
   Aşağıdaki atamayla sayfa
   içinde class özelliğine
   "php" değerini almış
   li etiketleri seçilecek
   ve etiketin barındırdığı
   içeriğin öncesine, tanımlanan
   stil tercihlerini yansıtacak
   biçimde "PHP Yazar: " ifadesi
   eklenecektir
*/ 

li.php:before {
      font-weight: bold;
      color: olive;
      content: "PHP Yazar: ";
}

/*
   Aşağıdaki atamayla sayfa
   içinde class özelliğine
   "teknoloji" değerini almış
   li etiketleri seçilecek
   ve etiketin barındırdığı
   içeriğin öncesine, tanımlanan
   stil tercihlerini yansıtacak
   biçimde "Teknoloji Yazar: " ifadesi
   eklenecektir
*/ 

li.teknoloji:before {
      font-weight: bold;
      color: navy;
      content: "Teknoloji Yazar: ";
}

/*
   Aşağıdaki atamayla sayfa
   içinde class özelliğine
   "android" değerini almış
   li etiketleri seçilecek
   ve etiketin barındırdığı
   içeriğin sonrasına, tanımlanan
   stil tercihlerini yansıtacak
   biçimde "-Android Yazar ifadesi
   eklenecektir
*/ 

li.android:after {
      font-weight: bold;
      color: green;
      content: "-Android Yazar";
}