Your Ad Here

Ardaşık Stil Sayfaları (CSS)

26 Ekim 2007

Sözde sınıflar (pseudo-classes)

Sözde sınıflar seçicilere özel etkiler vermek için kullanılır.

Dil Kuralı (Syntax)

Sözde sınıflar için dil kuralı şöyledir:
 
selector:pseudo-class {property: value}

CSS Sınıflarının sözde sınıflarla da kullanımı olasıdır.
 
selector.class:pseudo-class {property: value}

Demirli Sözde-sınıflar (Anchor Pseudo-classes)

Etkin olan bir bağ, gezilmiş, gezilmemiş ya da fareniz bir bağın üzerine geldiğinde CSS destekleyen tarayıcılarda başka biçimlerde görüntülenmesi:
 
a:link {color: #FF0000}     /* unvisited link */
a:visited {color: #00FF00}  /* visited link */
a:hover {color: #FF00FF}   /* mouse over link */
a:active {color: #0000FF}   /* selected link */

Not: CSS tanımında a:hover, etkin olması için a:link ve a:visited tanımlarından sonra gelmelidir.

Not: CSS tanımında a:active, etkin olması için a:hover tanımından sonra gelmelidir.

Not: Sözde sınıf adları büyük-küçük harflere duyarlı değildir.

Sözde-sınıflar (Pseudo-classes) ve CSS Sınıfları (CSS Classes)

Sözde sınıflar CSS sınıflarla birleştirilebilir: 

a.red:visited {color: #FF0000}
<a class="red" href="css_syntax.asp">CSS Syntax</a>

Eğer yukarıdaki örnekte bağ gezilirse kırmızı görüntülenebilir

CSS2 - :first-child (ilk-çocuk) Sözde Sınıfı


:first-child sözde sınıfı bir öğenin ilk çocuğu olan belirtilen bir başka öğeyi bulur.
Not: :first-child sözde sınıfının IE ile çalışması için <!DOCTYPE> tanımlanmalıdır. 
Bu örnekte seçici, div öğesinin ilk çocuğu
olan herhangi p öğesini arar ve div içindeki
ilk paragrafı içerden yazdırır:

div > p:first-child
{
text-indent:25px
}

Bu seçici aşağıdaki HTML'de bulunan
div içindeki ilk paragrafı arar:

<div>
<p>
First paragraph in div.
This paragraph will be indented.
</p>
<p>
Second paragraph in div.
This paragraph will not be indented.
</p>
</div>

fakat bu HTML içinde aradığımı bulamaz:

<div>
<h1>Header</h1>
<p>
The first paragraph inside the div.
This paragraph will not be indented.
</p>
</div>


Bu örnekte seçici, p öğesinin
içindeki herhangi em öğesini arar ve
bulduğu ilk em'nin yazı-tipi ağırlığını koyulaştırır:

p:first-child em
{
font-weight:bold
}

Örneğin, aşağıdaki HTML içindeki em paragrafın ilk çocuğudur:

<p>I am a <em>strong</em> man.</p>



Bu örnekte, herhangi bir öğenin
içindeki aranan ilk a öğesini bulur ve
yazı dekorasyonunu none yapar:

a:first-child
{
text-decoration:none
}

Örneğin, aşağıdaki HTML'de
bulunan ilk a bu paragrafın ilk çocuğudur ve
altı çizilmeyecektir. Bulunan ikinci a
ilk çocuk olmadığından altı çizili olacaktır:

<p>
Visit <a href="http://www.w3schools.com">W3Schools</a>
and learn CSS!
Visit <a href="http://www.w3schools.com">W3Schools</a>
and learn HTML!
</p>

CSS2 - :lang (dil) sözde sınıfı


:lang sözde sınıfı farklı diller için değişik kurallar tanımlamanızı sağlar. Aşağıdaki örnekte :lan sınıfı çift tırnağın tipini q öğeleri ve dil kodu "no" için tanımlar. 
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>

</html>

Sözde Sınıflar (Pseudo-classes)


Destekleyen Tarayıcılar:IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: Buradaki sayısal değer CSS türünü (CSS1 ya da CSS2) gösterir.

Sözde-sınıf Amacı IE F N W3C
:active Etkinleşen öğeye özel stil ekleme 4 1 8 1
:focus Öğe üzerine odaklandığında özel stil eklenmesi - 1.5 8 2
:hover Fareniz üzerine geldiğinde öğeye özel stil vermesi 4 1 7 1
:link Gezilmemiş bağa özel stil vermesi 3 1 4 1
:visited Gezilen bağa özel bir stil eklenmesi 3 1 4 1
:first-child bir başka öğenin ilk çocuğu olan bir öğeye özel stil eklenmesi 7 1 7 2
:lang Belirtilen öğede özel bir dil kullanılması - 1 8 2