Anasayfa / Web Tasarım / Css / CSS Temel Yapısı ve Nitelik Seçicileri 1. Kısım (Ders 2)

CSS Temel Yapısı ve Nitelik Seçicileri 1. Kısım (Ders 2)

Nitelik Seçicileri

Html etiketlerinin istenen parametresinin istenen değere sahip olduğu durumlarda css kodlarının devreye girmesini sağlar. Bunun birçok yolu vardır. Bu yollar aşağıda belirtildiği gibidir. Bu yolları incelerken Css kodlarındaki niteliklerin html kodlarındaki parametrelere karşılık geldiğini unutmayalım

[Nitelik]

Html elemanları içerisinde istenen niteliğin (Parametre) değerinin bulunması halinde Css kodumuz bu elemanı etkileyecektir. Html elemanın aldığı parametre değerinin seçici ile bir alakası yoktur.

[Nitelik=Değer]

Html elemanları içerisinde istenen niteliğin (Parametre) ve değerinin css kodunda belirtildiği gibi olması takdirde Css kodumuz bu elemanı etkileyecektir.

[Nitelik~=Değer]

Html elemanları içerisinde istenen niteliğin (Parametre) ve değerinin css kodunda belirtildiği gibi olması takdirde Css kodumuz bu elemanı etkileyecektir. Ancak bu seçicinin [Nitelik=Değer] seçicisinden farkı: [Nitelik=Değer] seçicisinde değer kısmının aynısı html kısmında da olmalıdır; Fakat [Nitelik~=Değer] seçicisinde değer kısmının bir bölümü olsa dahi kabul olur. Bu duruma verilebilecek en iyi örnek şudur:

3 adet butonumuz var. Bunların adları (name değerleri) “mavi buton, kırmızı buton, yeşil buton” olsun. [name~=buton] seçiciye sahip css kodu adında buton kelimesi geçen bütün elemanları etkileyecektir. [name~=kırmızı] seçicisine sahip css kodu ise sadece adında kırmızı kelimesi geçen bütün elemanları etkileyecektir.

[Nitelik^=Değer]

Bu seçici ise belirtilen niteliğin istenen değer ile başladığı html elemanlarını etkiler.

ÖRNEK: [name^=önem] seçicisi adları “önemli, önemsiz” olan iki değerin birine sahip elemanları etkileyecektir.

[Nitelik$=Değer]

Bu seçici belirtilen niteliğin değerin sonunun belirtildiği değere sahip olması gerekir.

[Nitelik|=Değer]

Bu seçici de [Nitelik^=Değer] seçicisi ile heme hemen aynı işlevi görür. Aralarındaki tek fark bu seçicide belirtilen değerden sonra kısa çizgi “-” getirilmelidir.

[Nitelik*=Değer]

Bu seçici belirtilen niteliğin değerinin aldığı değer içerisinde belirtilen değeri bulundurmalıdır. Yani [name*=”önem”] olan bir seçici, adları “önemli, önemsiz, önem” vs. olan html elemanlarını etkiler.

Bu dersimiz burada bitiyor ancak seçiciler konusu daha bitmedi. Konunun devamı bir sonraki dersimizde devam edecektir.

Bir sonraki yazımızda görüşmek üzere…

Hakkında Furkan Yağmur

Check Also

web-gemisi

CSS’e Giriş (Ders 1)

CSS(Cascading Style Sheets) HTML sayfaları içine gömülebilen bir dildir. CSS dilinin ana amacı belirtilen etiketlerinin …

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir