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;
}