CSS İle 'a' Elementinin Seçicileri Nelerdir?

Bu yazımız CSS seçicileri yazısının son yazısıdır. Bu yazı <a href=''></a> elementini seçmek üzerine hazırlanmış bir yazıdır. Fakat örneğin ":active" yapısı Pseudo-class Seçiciler başlığı altında tanımlanmış bir özelliktir. Fakat neticesi itibariyle en çok kullanıldığı alan <a href=''></a> elementi olması nedeniyle bu yazıda sadece <a href=''></a> elementi için nasıl kullanılıyor bunu görmeye çalışacağız.

CSS ":active" Seçicisi:

Elementin tıklanıldığı anı temsil etmektedir. Sadece "a" elementine özel değildir. Fakat en çok "a" elementi için kullanılmaktadır.

<a href=''></a>

a:active{
  color: red;
}

Yukarıdaki örnekte "a" elementine tıklanılması durumu, CSS ":active" özelliği ile seçilmiştir.

CSS ":hover" Seçicisi:

Mouse ile ilgili elementin üzerine gelme durumunu temsil etmektedir. Sadece "a" elementi için özel olan bir element değildir, diğer bütün HTML elementlerinde de kullanılmaktadır.

<a href=''></a>

a:hover{
  color: orange;
}

Yukarıdaki örnekte "a" elementinin üzerine mouse ile gelinmesi durumu CSS ile yakalanmıştır.

CSS ":link" Seçicisi:

Ziyaret edilmemiş bağlantıları seçmek için kullanılır.

<a href=''></a>

a:link{
  color: blue;
}

Yukarıdaki örnekte "a" elementinin ziyaret edilmemiş durumu, CSS ":link" özelliği ile seçilmiştir.

CSS ":visited" Seçicisi:

Ziyaret edilmiş bağlantıları seçmek için kullanılır.

<a href=''></a>

a:visited{
  color: purple;
}

Yukarıdaki örnekte "a" elementinin ziyaret edilmiş durumu, CSS ":visited" özelliği ile seçilmiştir.

CSS "[attribute^=value]" Seçicisi:

Belirtilen özniteliğin belirtilen değerle başlayan tüm öğeleri seçer.

<a href='https://example.com'></a>

a[href^="https"]{
  color: green;
}

Yukarıdaki örnekte "a" elementinin href özniteliği "https" ile başlayan durumu, CSS "[attribute^=value]" özelliği ile seçilmiştir.

CSS "[attribute$=value]" Seçicisi:

Belirtilen özniteliğin belirtilen değerle biten tüm öğeleri seçer.

<a href='document.pdf'></a>

a[href$=".pdf"]{
  color: brown;
}

Yukarıdaki örnekte "a" elementinin href özniteliği ".pdf" ile biten durumu, CSS "[attribute$=value]" özelliği ile seçilmiştir.

CSS "[attribute*=value]" Seçicisi:

Belirtilen özniteliğin belirtilen değeri içeren tüm öğeleri seçer.

<a href='https://www.w3schools.com'></a>

a[href*="w3schools"]{
  color: teal;
}

Yukarıdaki örnekte "a" elementinin href özniteliği "w3schools" kelimesini içeren durumu, CSS "[attribute*=value]" özelliği ile seçilmiştir.

CSS'te bulunan diğer seçim türlerini görüntülemek için CSS'te Seçim Yöntemleri isimli ana yazımıza bakmanızı tavsiye etmekteyiz.

CSS Nasıl Kullanılır?

CSS kullanımı temelde 3'e ayrılmaktadır. Bunlar Satır içi (inline) CSS, Dahili (internal) CSS ve Harici (External) CSS şeklindedir.

Satır içi (inline) CSS

Satır içi CSS kullanımında yapılması gereken tek şey ilgili elementin içerisine girip yeni bir "attribute" değeri tanımlamak olacaktır.

<!DOCTYPE html>
<html lang="tr">
  <body>
    <h1 style="color: orange; font-size:30px;" ></h1>
   </body>
</html>

Yukarıdaki örnekte "h1" elementine satır içi CSS uygulanarak; rengi turuncuya, yazı boyutu ise 30px değerine çekilmiştir.

Satır içi CSS yapıları, doğrudan ...

Devamını görüntüle

Form Elementlerinin Özel Seçicileri

Form elementlerinin özel seçicileri, CSS ile form elemanlarını özelleştirmek için kullanılan yapılardır. Bu seçiciler "form" elemanlarından input, select ve textarea elementleri için ortak olarak bulunmaktadırlar.

1) CSS ":checked" seçicisi nedir?

":checked" seçicisi, bir form elemanının seçili (checked) durumunu hedef alır. Özellikle checkbox ve radio button gibi input elemanlarında kullanılır.

<form action="">
  <input type="radio" checked="checked" value="male" name="gender"> Male<br>
  <input type="radio" value="female" name="gender"> Female<br>
  <input type="checkbox" checked="checked" value="Bike"> I have a bike&...

Devamını görüntüle