CSS - GENEL - PSEUDO (SÖZDE) SINIFLAR

Merhaba..

Css'te elemanlara özel durumlar için biçimledirme özellikleri verebilmek için PSEUDO dediğimiz sözde sınıf ve elemanlar kullanılıyor.. Elemanların üzerine gelindiğinde, odaklanıldığında  gibi durumlarda yada doğrudan bir elemanın herhangi bir çocuğuna özellik vermek istendiğinde CSS SÖZDE SINIFLARI'ndan yararlanırız.. Bu sınıfların başına " : " iki nokta üst üste işareti eklenir..

Bu yazıda çok kullandığım GENEL SÖZDE CSS SINIFLARI'ndan bahsedeceğim....

:HOVER

Elemanların üzerine gelindiğinde özellik almasını sağlar.. Tüm elemanlara uygulanabilir. Uygulanacak seçicinin sonuna 

:hover şeklinde eklenir..  "p:hover" , ".renk:hover"  gibi...

HTML

<a href=""> LİNK </a>
<div>DIV</div>
<p>H2 içinde <span>SPAN</span></p>

CSS

/* a üzerine gelince */
a:hover { color:orange }

/* div üzerine gelince */
div:hover {background-color:orange }

/* P üzerine gelindiğinde içindeki SPAN */
p:hover span {color:pink}

SONUÇ

Yukarıda;

• LINK üzerine gelindiğinde yazı turuncu olur..
• DIV üzerine gelindiğinde arka plan turuncu olur..
• P iüzerine gelindiğinde SPAN yazısı pembe olur..

:FOCUS

FOCUS odaklanma anlamına gelir. INPUT gibi elemanlar tıklandığında cursor bu eleman içerisine geçer  , yani sayfanın odağı o olur. İşte bu durumlarda elemanın özellik almasını sağlar.. Genelde veri girişi yapılan input gibi  elemanlara uygulanabilir. Uygulanacak seçicinin sonuna :focus  şeklinde eklenir..  "input:focus" gibi...

HTML

Adınız : <input type="text" name="ad">

CSS

/* input odaklanınca */
input:focus { background-color:orange; }

SONUÇ

Yukarıda; input kutusu tıklandığında odaklanmış olacak ve arka plan rengi turuncu olacaktır. ANcak sayfada başka bir yer tıklandığında bu kez odağını kaybedecek ve eski haline geri dönecektir..

:CHECKED

:CHECKED sınıfı formlardaki,

• checkbox ve radio inputları ile 
• select kutularındaki option'lar

tıklandığında, onaylandığında yada seçildiğinde CSS özellikleri uygulamak için kullanılır..  Ancak radio ve check yapılarından dolayı tüm CS özelliklerini uygulayamıyoruz.

HTML

<label> <input type="checkbox" name="onay"> Onaylıyorum</label>

CSS

/* input onaylanınca */
input:checked {outline:1px solid orange; }

SONUÇ

Yukarıda; onay kutusu tıklandığında , kutu kenarlığı turuncu olacaktır..

KARDEŞ SEÇİCİ İLE  :CHECKED  KULLANIMI

:checked sınıfı , kardeş etiketlerin CSS özelliklerini değiştirmek için  kullanılabilir.. Örneğin checkbox tıklandığında bir div'in yada paragrafın görünmesi veya kaybolması gibi.. Tabi bunun için CSS birleşik seçicilerden yararlanmalıyız...

HTML

<input type="checkbox" id="onay"> 
<label for="onay"> Onaylıyorum  </label>
<p> Onaylandı </p>

CSS

/* P etiketi gizli ve rengi  yeşil */
p { display:none;color:green; }

/* input onaylanınca kendinden sonra gelen kardeş P görünür oluyor */
input:checked  ~ p { display:block }

SONUÇ

Yukarıda; onay kutusu tıklandığında , hemen altında "onaylandı" yazan P etiketi görünür olacaktır... Bunun için CSS ile önce P etiketini gizli yapıyoruz (display:none) . Daha sonra input:checked ~ p kardeş seçicisi ile , onay kutusu tıklandığında , P etiketini görünür yapıyoruz..

:EMPTY

EMPTY boş demektir ve çocuğu yada içinde herhangi bir yazı  olmayan elemanları seçmek için kullanılır. Eleman içerisinde sadece tek br boşluk bile olsa "o eleman boş sayılmaz".. Uygulanacak seçicinin sonuna :empty  şeklinde eklenir..  "div:empty" gibi...

HTML

<p> </p> <!--  Boşluk var -->
<p> <span> PARAGRAF 2 </span>  <!--  span çocuğu var   -->
<p> PARAGRAF 3 </p> <!--  Yazı var -->
<p></p>   <!-- BOŞ -->

CSS

/*İçi boş P'lerin arka plan rengi turuncu olacak..  */
p:empty {background-color:orange;}

SONUÇ

HTML kodlarında içi boş olan sadece 4. "p"  etiketi. Dolayısı ile sadece bu paragrafın arka planı turuncu olur.. İlk paragraf sadece bir boşluk içerdiğinden , sonuç bölümünde sadece satır atlamış gibi görünüyor..

:HAS(+x)

HASsınıfı kendinden hemen  sonra gelen kardeşi "belirli bir eleman" olan elemanları seçmek için kullanılır   Uygulanacak seçicinin sonuna :has() şeklinde eklenir ve parantez içerisine + işaret ile beraber sonraki eleman yazılır.. "p:has(+span)" gibi...

HTML

<p>  PARAGRAF 1  </p>
<span> SPAN 1 </span>
<p>  PARAGRAF 2  </p>
<div> DIV 1 </div> 

CSS

/*kendinden sonra H1 gelen P elemanları */
p:has(+div) {color:orange;}

SONUÇ

Yukarıdaki HTML bloğuna göre kendinden hemen sonra DIV olan sadece PARAGRAF 2 elemanı var. Dolayıısyla bu paragrafın yazı rengi turunu olur..

Görüşmek üzere ....