CSS'de Bağlantılarla İlişkili Sözde Sınıflar

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.

<style>
a:any-link {
  border: 1px solid blue;
  color: orange;
}
</style>

<a href="https://eminylmz.dev">Kodlama Vakti</a><br>
<a href="#">Çapa Link</a><br>
<a>Href parametresi bulunmayan bir link</a>

# :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.

<style>
a:link {
  background-color: gold;
  color: green;
}
</style>

<a href="#eminylmz">Bu sıradan bir bağlantıdır.</a><br>
<a href="">Ziyaret edilmiş bir bağlantı</a><br>

# :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.

<style>
a:visited {
  background-color: yellow;
  border-color: hotpink;
  color: hotpink;
}
</style>

<a href="#eminylmz">Bu sıradan bir bağlantıdır.</a><br>
<a href="">Ziyaret edilmiş bir bağlantı</a><br>

# :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.

<style>
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*/
</style>

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

# :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.

<style>
p:target {
  background-color: gold;
}

p:target i {
  color: red;
}
</style>

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