CSS SÖZDE SINIFLAR - SÖZDE ELEMENTLER

Sözde denmesinin nedeni normal HTML hiyerarsisi içinde bu sınıf elemanların bulunmamasındandır. Bu sınıf ve elemanlar HTML hiyerarşisi ile erişemediğimiz eleman ve sınıflara erişmemizi sağlar.

Sözde(Pseudo) Sınıf Seçicileri

Sözde Dinamik 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.

:focus - Odaklanan elemana stil tanımlaması yapmak için kullanılır Örnek: <input> alanına içerik girerken metin giriş alanına odaklandığında yazı, background, renk ve border değişimi yapılması gibi özelliklerde kullanabiliriz.

CSS:

 input:focus{background-color:yellow}
  

HTML:

  
 Adres:<input type="text"/>

 

ÇIKTI:

:active - Aktif elemanına stil atamak için kullanılır.

:hover - Bir elemanın üzerine farenin imleci geldiğinde yapılacak tanımlama için kullanılır.

CSS:

div{background-color:black;
    width:120px;
    height:40px;
    color:white
  } 

div:hover{background-color:blue}

HTML:

<div>KUTU</div>

ÇIKTI:

Sözde Link sınıfı

Sözde Link sınıf stilleri oluşturulurken iki Sözde Link sınıfı vardır.

:link - Ziyaret edilmemiş linkin alacağı renk ve durum

:visited - Ziyaret edilmiş bir linkin alacağı renk ve durum

ÖRNEK:

 
 a:link {color:blue} 
 
 a:visited {color:red}
  
 

:hover - mause ile linkin üzerine gelindiğinde özelliklerinin işleme konulması. Örneğin mause linkin üzerine geldiğinde altı çizili olması isteniyorsa hover kısmında text-decoration :underline seçilmelidir. Üstü çizili olması için overline seçilmelidir. Hem altı hem üstü çizili olması için iki tane hover kullanılmalıdır. Ayrıca link yazısının rengi değiştirilebilir.

CSS:

  
a{color:green;font-size:20px}
  
a:hover{color:blue}

HTML:

<a href="http://www.google.com">GOOGLE</a>

ÇIKTI:

:active - Linkin tıklandığı anda alacağı renk ve durum

color : Linklerin, ziyaret edilen linklerin.. renk özelliğinin ayarlanması burada yapılır.

text-decoration : none seçilirse ilgili linkin altı çizili özelliği ortadan kalkar. underline seçilirse ilgili linkin altı çizili özelliği devam eder.

Sözde sınıf seçicileri birleştirmek

CSS 2.1 ile birlikte aynı seçiciye ait sözde sınıfları birleştirme özelliği de gelmiştir.

Örneğin ziyaret edilmiş linklerin : hover özelliği ile ziyaret edilmemiş linklerin : hover özelliğini farklı atamak istersek.

 
 a:link:hover {color:red;} 
 
 a:visited:hover {color:darkblue;}
  

Sözde(Pseudo) Elemanlar seçicileri

first-letter (ilk harf): Bir blok-level elemanın ilk harfine stil tanımlaması yapmak için kullanılır.

CSS:

p:first-letter{font-size:28px;color:brown}

HTML:

 
 <p>Sözde(Pseudo) Elemanlar seçicileri </p>
 
 

ÇIKTI:

first-line (ilk satır): Bir metnin ilk satırına stil atamak için kullanılır.

CSS:

 
 p:first-line{background-color:Salmon}

 

HTML:

 
 <p>Sözde(Pseudo) Elemanlar seçicileri<br/>
 
 2. satır<br/>
 
 3.satır </p>
 
 

ÇIKTI:

before ve after elemanları: Bir elemanın öncesine ve sonrasına bir içerik veya özellik eklemek için kullanılır.

CSS:

 
 p:before{content:"NOT:" /*content yazı ekler*/ }

 p:after{content:"<-BİTTİ->"}
 
 

HTML:

 
 <p>Sözde(Pseudo) Elemanlar seçicileri </p>
 
 

ÇIKTI: