CSS, Attribute (Öz Nitelik) Seçiciler (Attribute Selectors)

HTML elementinin sahip olduğu herhangi bir özelliği biliyorsak bu durum o elemente sadece sahip olduğu Attribute (Öz Nitelik) değeri ile erişim sağlamak mümkünüdür. Fakat öz nitelik seçme işlemleri de kendi içerisinde 7 farklı alana ayrılmaktadır.


1) Sadece Attibute değeri bilinen elementi yakalama:

Eğer seçilmek istenilen elementin, Attibute değeri biliniyor fakat sahip olduğu "value" değeri bilinmiyorsa

<a href="https://bilimekseni.com">This page</a>
[href]{
  color: orange; 
}

Bu durumda yukarıdaki gibi bir işlem ile tüm href özelliğine sahip olan elementlere erişim sağlanır.


2) Hem Attribute hem de değeri biliniyorsa:

Bu durumda CSS ile hem Attibute değerini hemde "value" değerini aynı anda yazmamız yeterli olacaktır.

<input type="text">
[type='text']{
  width: 100%;
  color: red;
}

Attibute ve "value" değerinin net olarak bilindiği durumlarda kullanılması tavsiye edilir.


3) Attibute değeri biliniyor, "value" değerinin ise sadece bir kelimesi biliniyorsa

"value" içerisinde yer alan bir kelime biliniyorsa bu durumda sadece o kelimenin bulunduğu kısımları seçmek istiyorsak bu durumda kesinlikle kullanmalıyız.. İstinai durumlarda karşımıza çıkacak ve belki günü kurtacak olan bir seçim yöntemidir.

<h1 title="header">Title</h1>         <!-- ❌ -->
<h1 title="true">Title</h1>           <!-- ❌ -->
<h2 title="flower daily">blabla</h2>  <!-- ✔️ -->
<span title="flowers"></span>         <!-- ❌ -->
<h2 title="choose flower">blabla</h2> <!-- ✔️ -->;
[title~='flower']{
  color: red;
}

Yukarıdaki örnekte title değeri içerisinde "flower" olan bütün elementleri seçer. Fakat yukarıdaki kullanımda kelime olması zorunludur! Eğer kelime "flower" yerine "flowers" olursa bu durumda seçme işlemi gerçekleşmeyecektir!


4) Attribute biliniyor, "value" değerin başlangıcı biliniyor

Her zaman karşımıza çıkan bir özellik değidir. Özellikle sayfa içerisinde birden çok dil kullanılıyorsa ve her bir dil için farklı özel renklendirmeler (tasarımlar) yapılmak isteniliyorsa kullanılabilir.

<h1 lang="en">All English</h1>       <!-- ✔️ -->
<h1 lang="en-uk">United Kingdom</h1> <!-- ✔️ -->
<h1 lang="en-usa">United States</h1> <!-- ✔️ -->
<h1 lang="enginar">Meyve</h1>        <!-- ❌ -->
[lang|="en"]{
  color: red;
}

Yukarıdaki örnekte en ve en- ile başlayan bütün elementler seçilmiştir. Fakat "enginar" kısmı içerisindeki "en" kısmı seçilmemiştir!

5) Belirli bir elementin, belirli bir değerle başlangıç "value" değerini kontrol etme:

Özellikle "a" elementlerinde URL'in https veya http olması durumunu kontrol etmek maksatlı kullanılmaktadır. Eğer link güvenli ise yani HTTP ise bu durumda yeşil renkli değilse bu durumda kırmızı renkli olabilir.

<a href="http://bilimekseni.com">This Page</a> <!-- ❌ -->
<a href="https://bilimekseni.com">This page</a> <!-- ✔️ -->
a[href^='https']{
  color: red;
}

Yukarıdaki örnekte "a" elementinin href attiribute özelliğinin "https" ile başlayıp başlamadığı kontrol edilmiştir.


6) Belirli bir elementin, belirli bir değerle bitiş "value" değerini kontrol etme:

5). maddede yazdığımız olan zıddı olarak düşünülebilir. Elementin, ilgili value değerinin başlangını değil bitişini kontrol eder.

<a href="http://bilimekseni.com/img/content/page.jpg">This Page</a>
<a href="https://bilimekseni.com/img/content/logo.png">This page</a>
a[href$='.jpg']{
   color: red;
 }

Yukarıdaki örnekte a elementinin, href Attribute özelliğinden, value değeri ".jpg" ile biten elementin seçilmesi istenilmektedir.


7. Belirli bir elementin, belirlenen attibute "value" değerinde bir kelimenin herhangi bir yerde geçmesi durumunu kontrol için

Bu durumda yine istisnai bir durumdur. Elimizde bir kelime var ve biz bu kelimenin ne başta ne de sonda geçip geçmediğini bilmiyoruz. Bu durumda heryerde olabilme ihtimali için:

<a href="http://bilimekseni.com/imgcontentpage.jpg">This Page</a>
<a href="https://bilimekseni.com/img/content/logo.png">This page</a>
a[href*='content'] {
  color: red;
}

Yukarıdaki örnekte aranan kelime "content" kelimesidir. Ve her iki element içerisinde de bulunduğundan kaynaklı olarak iki elementte başarılı bir şekilde seçilmektedir.


Böylelikle CSS içersindeki tüm Attribute (Öz Nitelik) seçicileri yazmış oluyoruz.


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.

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

CSS Pseudo-element (Sözde Element) Seçiciler

Pseudo, kelime anlamı ile sahte manasına gelmektedir. Bu nedenle aslında var olan bir elementin üzerinden türetilen CSS özellikleridir. Doğrudan HTML elementleri incelendiğinde sayfa içerisinde bulunan harici bir element değillerdir.

Pseudo-class (Sözde Sınıf) yapıları ile arasındaki en belirgin fark; Pseudo-class yapıları CSS'te ":" ile gösterilirken, Pseudo-element yapıları CSS'te "::" işareti ile gösterilmektedir.

Toplamda 7 farklı Pseudo-element yapısı bulunmaktadır. Bunlar: ::after, ::before, ::first-letter, ::first-line, ::marker, ::placeholder, ::selection şeklindedir.


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