CSS Dersleri 28 - Bağlantılarla İlişkili Sözde Sınıflar

CSS Dersleri 28 - Bağlantılarla İlişkili Sözde Sınıflar


Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS Bağlantılarla İlişkili Sözde Sınıfları konusunu öğreneceğiz.

:any-link Sözde Sınıfı

:any-link CSS sözde sınıfı seçici, ziyaret edilip edilmediğinden bağımsız olarak bir link olarak davranan tüm etiketleri seçer. Başka bir deyişle, href niteliğine sahip her a, area veya link etiketi ile eşleşir.

<a href="https://kodlamavakti.com">Kodlama Vakti</a><br>
<a href="#">Çapa Link</a><br>
<a>Href parametresi bulunmayan bir link</a>
a:any-link {
  border: 1px solid blue;
  color: orange;
}

:link Sözde Sınıfı

CSS'de :link sözde sınıfı, henüz ziyaret edilmemiş bir öğeyi temsil eder. Bir href niteliğine sahip her ziyaret edilmemiş a, area veya link etiketini seçer.

<a href="#kodlamavakti">Bu sıradan bir bağlantıdır.</a><br>
<a href="">Ziyaret edilmiş bir bağlantı</a><br>
a:link {
  background-color: gold;
  color: green;
}

:visited Sözde Sınıfı

CSS'de :visited sözde sınıfı, kullanıcının daha önce ziyaret etmiş olduğu bağlantıları temsil eder.

<a href="#kodlamavakti">Bu sıradan bir bağlantıdır.</a><br>
<a href="">Ziyaret edilmiş bir bağlantı</a><br>
a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}

:hover Sözde Sınıfı

CSS'de :hover sözde sınıfı,  kullanıcı imleçle (fare işaretçisi) bir etiketin üzerine geldiğinde tetiklenir.

<a href="#">Fareyi bu linkin üzerine getirin</a>
a {
  background-color: powderblue;
}

a:hover {
  background-color: gold;
}

:active Sözde Sınıfı

CSS'de :active sözde sınıfı, kullanıcı tarafından etkinleştirilen bir öğeyi (düğme gibi) temsil eder. Fare kullanırken, "etkinleştirme" genellikle kullanıcı birincil fare düğmesine bastığında başlar.

<p> Bu paragraf bir bağlantı içerir:
   <a href="#"> Bu bağlantı, üzerini tıklarken kırmızıya dönecektir. </a>
   Paragrafın üzerine veya bağlantıya tıkladığınızda gri bir arka plan olacaktır.
</p>
a:link { color: blue; }          /* Ziyaret Edilmemiş Link*/
a:visited { color: purple; }     /* Ziyaret Edilmiş Link */
a:hover { background: yellow; }  /* Üstüne Gelinmiş Link */
a:active { color: red; }         /* Seçilmiş Link*/

p:active { background: #eee; }   /* Seçilmiş Paragraf*/

:target Sözde Sınıfı

CSS'de :target sözde sınıfı, URL'nin parçasıyla eşleşen bir kimliğe sahip benzersiz bir etiketi(hedef öğe) temsil eder.

<h3>:target Örneği</h3>
<ol>
 <li><a href="#p1">1. paragrafa git!</a></li>
 <li><a href="#p2">2. paragrafa git!</a></li>
 <li><a href="#no">Bu bağlantı hiçbir yere gitmiyor  çünkü hedef mevcut değil..</a></li>
</ol>

<h3>Paragraflar</h3>
<p id="p1">Bir URL parçası kullanarak <i> bu paragrafı </i> hedefleyebilirsiniz. Denemek için yukarıdaki bağlantıya tıklayın!</p>
<p id="p2">Buda bir diğer <i>paragraf örneğidir</i>.</p>
p:target {
  background-color: gold;
}

p:target i {
  color: red;
}

 

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 41 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 41 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla