Sözde-sınıflar(Pseudo-class) ve Sözde-elementler(Pseudo-elements)
Pseudo sınıf ve elementleri CSS’i destekleyen web tarayıcıları tarafından otomatik olarak tanınan özel sınıf ve elementlerdir. Bu sınıf ve elementler (x)html hiyerarşisi ile erişemediğimiz element ve sınıflara erişmemizi sağlar. Pseudo sınıfı bir elementi farklı sınıflara böler(örn: link elementini active, visited vd. sınıflarına böler) Pseudo elementi ise bir elementi alt kısımlara böler (örneğin bir paragrafın ilk harfi, bir paragrafın ilk satırı gibi.)
Pseudo sınıfına örnek:
a:visited {
color: red;
}
Pseudo elementine örnek:
p:first-line {
font-weight: bold;
}
Pseudo sınıf ve elemtleri HTML class özelliği olarak belirtilmemiştir. Normal sınıflar pseudo sınıf ve elementleri ile kullanılabilir.
a.disariyalinkller:link, a.disariyalinkller:visited {
color: maroon;
}
Aynı şekilde id seçicileri ile birlikte de kullanılabilirler
a#altkisim:link{
font-weight: bold;
}
Pseudo sınıflarını da ikiye ayıra biliriz. Link Pseduo Sınıfıları ve Dinamik Pseudo Sınıfları
Link Pseudo sınıfı
Yanlızca linklere uygulanan iki Link Pseduo sınıfı vardır. :link ve :visited
:link – Ziyaret edilmemiş sayfanın linkine stil tanımlaması yapmak için kullanılır. Ancak bir çok web tarayıcısı yapılan stil tanımlarını ziyaret edilmiş sayfa linklerine de uygular.
:visited - Henüz ziyaret edilmiş sayfa linklerine stil tanımlaması yapmak için kullanılır.
a:link {
color: blue;
}
a:visited {
color: red;
}
Bunun yerine genelde aşağıdaki gibi bir kod da kullanılır
a {
color: blue;
}
a:visited {
color: red;
}
Bu kodlama ile kullanıcaya ziyaret ettiği sayfa linkleri farklı renkte gösterilerek içeriksel bir bilgi görsel olarak verilebilir.
Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: kısmen ;
Opera 5.0 ‘ 6.0: destekliyor
Dinamik Pseudo Sınıfları
Dinamik Pseudo Sınıfları sayfa görünümüne çok büyük katkılar yapabilir. Bu sınıflar genelde linklere uygulanır ancak bir çok kullanım alanları vardır. tanedir :focus, :active ve :hover
Pseudo sınıflarında sıralama önemlidir. Genel kullanımda “link-visited-hover-active,” sıralaması yapılmalıdır. Tüm sınıflar içinse “link-visited-
focus-hover-active.” sıralaması yapılmalıdır.
:focus - Odaklanan elemente stil tanımlası yapmak için kullanılır Örn: input alanına içerik girerken
:active – Aktif olan elemente stil atamak için kullanılır.
:hover - Bir elementin üzerine Farenin imleci geldiğinde yapılacak tanımlama için Örn: bir linkin üzerine fare ile geldiğimizde renk değiştirmesini sağlamak için
Linkler için genel kullanım
a:link {
color: navy;
}
a:visited {
color: gray;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
:focus için bir örnek verecek olursak
input:focus {
background: silver;
font-weight: bold;
}
Internet Explorer 5.0, 5.5, 6.0, 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
İlk Çocuk Elementi seçmek
Diğer bir pseudo sınıfımız :first-child‘dır.
first:child: Belirtilen elementin ilk Çocuk Elementine stil atamak için kullanılır.
p:first-child {
font-weight: bold;
}
li:first-child {
color:#f00;
}
<div>
<p>Bu paragraf ilk çocuk elementtir ve sonuç olarak kalın olacaktır</p>
<ul>
Bu liste ilk çocuk elementtir ve font rengi kırmızı olacak
Bu <strong>çocuk element </strong>değil
Bu da değil
</ul>
<p>Bu pragraf <em>bir</em> çocuk element değil.</p>
</div>
Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: desteklemiyor
:lang Pseudo Sınıfı
Lang pseudo sınıfı içerikteki bir elemente farklı bir dil de yazmamızı sağlar.
Atanabilecek dil listesi ve kullanılacak kısaltmalara ISO 639 and RFC 1776 standards erişebilirsiniz.
<html>
<head>
<title>lang test</title>
<style type="text/css">
p:lang(fr) {
color: red;
}
</style>
</head><body>
<p lang="fr">Bonjour le monde!</p>
</body>
</html>
Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5 – 9.0: destekliyor
Pseudo Sınıflarını birleştirmek
CSS2.1 ile birlikte aynı seçiciye ait pseudo elemntlerini birleştirme özelliği de gelmiştir. Örneğin ziyaret edilmiş linklerin hover özelliği ile ziyaret edilmemiş linklerin hover özelliğini farklı atamak istesek
a:link:hover {
color: red;
}
a:visited:hover {
color: pink;
}
Sıralama önemli değildir.
Internet Explorer 5.0, 5.5, 6.0, 7.0 desteklemiyor
Mozilla 1.0: destekliyor ;
Opera 9.0: desteklemiyor
Pseudo Element Seçicileri
Bu elementler hayali elementlerdir. (X)HTML hiyerarşisi içinde bu elemntlere yoktur. CSS2.1 de Dört adet Pseudo Element Seçicisi vardır: first-letter, first-line, before ve after
first-letter (ilk harf)
Bir blok-level elementin ilk harfine stil tanımlması yapmak için kullanılır. Örnek verecek olursak h1 elementinin baş harfinin büyük olması için :
h1:first-letter {
font-size: 200%;
}
<h1>Bu büyük bir başlık</h1>
Internet Explorer 5.0, 5.5, 6.0 desteklemiyor 7.0: destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
first-line (ilk satır)
Bir metnin ilk elementine stil atamak için kullanılır. Örneğin paragraflarınızın ilk satırlarını renklendirmek isitiyorsunuz.
p:first-line {
color: red;
}
Internet Explorer 5.0, 5.5, 6.0,7.0 destekliyor ;
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 5.0 ‘ 6.0: destekliyor
before ve after elementleri
Bir elementin öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.
Notlarımızın başına otomatik oalrak Not yazmak için
P.not:before {
content: "Not."
}
kodu yeterlidir. Aynı şekilde paragraflarımzın sonuna otomatik bitti yazıp nokta koymak istersek
body:after {
content: " Bitti.";
}
yeterlidir.
Internet Explorer 5.0, 5.5, 6.0,7.0 desteklemiyor
Netscape Navigator 6.0, 7.0: destekliyor ;
Mozilla 1.0: destekliyor ;
Opera 7.5 ‘ 8.5: destekliyor
CSS bir nesneye birden fazla atama yapmayı destekler. Yani evet istediğinizi yapabilrisiniz.
:before
:after
:first-letter
özelliklerini bir nesneye atayabilirisiniz. Ama bunları ie6 görmeyeceği için şimdilik uygulmak pek mantıklı değil
bir paragrafa bir kaç özellik eklemek istersek napabiliriz peki..
ben bu paragrafın not ile başlamasını istiyorum ama sonunada bitti eklemek istiyorum hemde ilk harfini büyük ve kırmızı yapacam diyelim :D
resimli hücre ile normal hücre yazanlar aslında UL Lİ şeklindeydi. kod çalıştı yada temizlenmiş sanırım. 2 li olarak düşünün. soruyu yanlış yerde sorduysam kusura bakmayın.
.gelirken{/*Onmouseover olayı ile*/
background:green;
border-top: 1px solid red;
border-bottom: 1px solid red;
border-left: 1px solid red;
border-right: 1px solid red;
color:white;
}
.giderken{/*Onmouseout olayı ile*/
background:pink;
border-top: 1px solid yellow;
border-bottom: 1px solid yellow;
border-left: 1px solid yellow;
border-right: 1px solid yellow;
color:brown;
}
.resimli{
background: red url(ok.gif) no-repeat right;
}
resimli hücre
normal hücre
fare üzerinde DEĞİLKEN her iki Lİ de “giderken” sitilinde olsun, ama resimli hücrede de aynı zamanda “resimli” stilide olsun. Fare ile üzerlerine geldiğimde de her ikiside “gelirken” stiline bürünsün istiyorum. ama nasıl yapacağımı bilemiyorum. Stilleri ayrı ayrı TEKRARLAYARAK yapabilirim.
ama gereksiz tekrarları yapmak istemiyorum.
NOT: ID kullanamam. Çünkü IDler dinamik ve sürekli değişiyor.
sdasdasdasdasd
merhabalar
P.not:before { content: “Not.” }
bu satırları css dosyasına ekliyorum Ama çözemediğim konu html sayfasına ne ekliyeceğim.
yukarıdaki kod bu işi yapıyor. çift tırnakları tekrar yaz.
sdasdasdasdasd
Merhabalar
Bu güzel belgeler için çok teşekkürler.
before elementi için bir örnek vermeniz mümkünmü. Çünkü bir türlü yazıların başına “Not” kelimesini ekletemedim.
“MozillaFirefox-2.0.4″
saygılarımla
tum makalelerinizi okuyorum. ama hepsi icin tesekkur etmeyecegim. okuma hizimi kesiyor cunku :)
hepsi icin sagolun.
hep websitelerinde gazete ve dergilerdeki gibi ilk harflerin nasıl büyük harfle başladığını merak ederdim. mantığını öğrenmiş oldum, teşekkürler…