CSS için temel olarak üç seçici bulunmaktadır. Bunları başlıca şu şekilde sıralayabiliriz, id seçici, sınıf seçici ve tag seçicidir. Ek olarak da hiyerarşik yapılarda da yani iç içe kullanılan HTML kodları için yazılan CSS kodları, değişik seçici metotları kullanılmaktadır.



ID Seçiciler

Oluşturduğumuz web sayfalarında kullanacağımız nesneler (DOM Elemanları) id değerlerine sahiptir. Bu değer sadece o nesneye aittir. ID değerlerini kullanarak HTML sayfalarında kullandığımız elemanları birbirinden ayırt edebiliriz. ID özelliği sadece kullanıldığı nesneye ait olduğu için yapılan değişiklikler ve etkileşimler sadece o nesneyi etkileyecektir. (Buradaki etkileşimlerin CSS veya Javascript ile olduğu düşünülebilir) CSS kodlarında istediğimiz ID değerine sahip elemanı seçebilmemiz için # (diyez) işaretini kullanacağız.



Örnek olarak ;







Bu CSS kodlarını kullanarak, HTML kodumuzu oluşturmaya başlayalım:

SINIF Seçiciler

Sınıf seçiciler, oluşturulan stilin HTML sayfasında bir veya birden fazla elemana etki etmesi ve birden fazla stilin uygulanabilmesi durumunda kullanılan bir çeşittir. ID seçicinin yanı sıra, Sınıf seçiciler birden fazla elemanı etkileyebilmektedir.

Bir örnek ile anlatacak olursak :

CSS kodlarımız sayesinde, HTML kodlarımızı oluşturalım :

Burak

Burada göreceğimiz üzere, div ve p taglarımızın hepsine alan stil sınıfını verdik. Böylece bu elemanlarımız alan sınıfının özelliklerini hemen taşımaya başlar. Sonra alan sınıfındaki nitelikleri değiştirdiğimizde, bu değişiklikler iki elemanı da etkiler.

TAG Seçiciler



Tag seçiciler, HTML sayfamızda kullandığımız aynı türden tüm elemanları seçmek için kullanılır. Biz CSS tanımlaması yapma işlemine başlarken, TAG ismi ile nitelik belirteceğimiz için, yaptığımız değişiklikler aynı TAG'a sahip tüm elemanları etkiler. Bir örnek ile açıklayacak olursak :

CSS kodlarımıza göre, HTML kodlarımızı oluşturalım :

Aynı türden elemanlar stilde belirtilen özellikleri bize yansıtma işlemi göreceklerdir. TAG ismine göre stil belirlediğimiz zaman, sayfamızda kullanacağımız TAG 'ların çoğu, belirttiğimiz özellikleri alacak.


Çocuk Seçiciler



Bu seçiciler, herhangi bir elementin içerisinde kullanacağımız, alt elementleri kapsar. Yine örnek verecek olursak; "div" elementini ebeveyn olarak düşünecek olursak, içerisindeki , "b" ve "a" elementleri "div" elementinin çocuğu rolünde olacaktır. Burada dikkat edilmesi gereken en önemli nokta; çocuk seçicilerin, ebeveyn olan elementin bir alt katmanını seçtiğidir. Veya, biraz önce verdiğimiz örneğe göre çocuk seçicilerle veya elementinin içerisindeki başka elementlere erişemeyiz.



Yapılan kodlamaya göre aynı düzeyde ve yan yana bulunan elementlerin içinden ikinci elementi seçer. Elementlerin yan yana olma gibi durumlarını + karakteri ile belirliyoruz.



Evrensel Seçiciler



Belirtilmiş element altındaki tüm diğer elementleri veya tüm elementleri seçmek için kullanılır. Yıldız (*) karakteriyle kullanıyoruz.Elementlerin içerisinde bulundurduğu alt özelliklere göre de elementlere stil verilebilir.

Hover Seçicisi



Üzerine gelindiğinde etkilenecek biçimde seçim yapmak için ve özellikle de anchor elementiyle çok kullanılmaktadır. Bir button'un üzerine gelindiğinde sergileyeceği davranışı belirlemek için kullanılmaktadır.

CSS3 ile birlikte birçok yeni seçici çeşidi eklenmiştir. Böylece etki alanları genişlemiş daha rahat element seçebilme fırsatı doğmuştur. Seçiciler yorumlanırken tarayıcının davranışını anlayabilmek için Specificity kavramlarını da göz önüne almak şarttır.


Bu makale http://websayfasiyapma.com/css-seciciler-ve-kullanimlari/ sitesinden alınmıştır...