CSS Selectors || CSS Seçiciler
CSS seçiciler nedir? Nasıl kullanılır?
CSS ile HTML <body></body> elementi içerisinde bulunan bütün elementler seçilebilir ve sahip olduğu tasarımlar değiştirilebilir. Bu konu uzun bir konu olduğundan kaynaklı, ilgili yazıları parçalar hâlinde yazarak, belli başlıklar altında yazmaya karar verdik. Bu başlıklarıımız sırası ile:
a) Temel Seçiciler ,
b) Kombine (Kompleks) Seçiciler ,
c) Attribute (Öz Nitelik) Seçiciler ,
d) Pseudo-class (Sözde Sınıf) Seçiciler ,
e) Pseudo-element (Sözde element) Seçiciler ,
f) "Form" Elementinin Özel Seçicileri ,
g) "A" Elementinin Özel Seçicileri ,
şeklindedir.
Yukarıdaki linklere tıklayarak, ilgili seçim yöntemlerini detaylı bir şekilde görebilirsiniz.
CSS, Pseudo - Class (Sözde Sınıf) Seçiciler
Psudo, kelime anlamı ile "sahte" manasına gelmektedir. Bu nedenle aslında bu işlemler içerisinde yapmış olduğumuz seçim işlemleri, doğrudan elementin sahip olduğu değerler değil, olması beklenen değerlerdir. CSS, Pseudo - Class Seçicileri konusunun daha iyi anlaşılması için 6 farklı başlık altında bir yazım gerçekleştireceğiz. Bunlar; Genel Pseudo-class seçiciler, Form elemanlarına yönelik Pseudo-class seçiciler, Ebeveyn - Çocuk ilişkisine yönelik Pseudo-class seçiciler, Elemanın türüne yönelik Pseudo-class seçiciler, İçerik durumuna yönelik Pseudo-class seçiciler ve en son olarak Kök eleman seçici şeklindedir.
CSS Genel Pseudo-class seçiciler
En sık kullanılan Pseudo-class seçicileridir. Birden çok Genel Pseudo-class yapısı...
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 ola...