HTML Image Map b2s1 Ek4 Ek 6 Ek5 b8s1 b1s1  Ek7 Nitelikler b5s1.htm Ek2 b3s1 Ek3 b7s1 Ek7 Elementler Ek1 b4s1 b6s1  Ek7 Catalogue index previous next

Katlı Stil Sayfaları (Sürüm3)

Selektörler

Sayfa 1 / 3


 

Selektörlerin Tanıtımı

 

CSS3 Selektör Tipleri

 

Selektörler CSS programlama dilinde temel programlama birimleridir. Selektörler belirli özelliklere sahip olan elementleri hedefleyen bildiri tipleridir. Selektörler, tanımlarına uyan elementleri bulur ve niteliklerini kendi içeriklerine göre yeniden düzenlerler. Selektörlerin programlanabilir özellikleri, HTML niteliklerinden çok daha fazladır. Bu nedenle CSS kullanımı bir sayfanın görüntüsü üzerinde çok daha ayrıntılı bir kontrol olanağı sağlar.

CSS3 Spesifikasyonunda Belirtilen Selektör Tipleri Listesi

 

Selektör Tipi

Anlamı

Tanımlandığı Alt Bölüm

İlk Tanımlandığı CSS Düzeyi

*

her element

Evrensel Selektör

2

E

E tipinde bir element

Tip Selektörleri

1

E[foo]

"foo" niteliği belirtilmiş bir element

Nitelik Selektörleri

2

E[foo="bar"]

"foo" niteliği tam olarak "bar" değerine eşit bir element

Nitelik Selektörleri

2

E[foo~="bar"]

"foo" niteliğinin değeri birisi tam olarak "bar" değerine eşit, boşluk ile ayrılmış değerler listesi ile verilmiş bir element

Nitelik Selektörleri

2

E[foo^="bar"]

"foo" niteliğinin değeri, "bar" string değeri ile başlayan bir element

Nitelik Selektörleri

3

E[foo$="bar"]

"foo" niteliğinin değeri, "bar" string değeri ile biten bir element

Nitelik Selektörleri

3

E[foo*="bar"]

"foo" niteliğinin değeri, "bar" alt string değerini içeren bir element

Nitelik Selektörleri

3

E[hreflang|="en"]

"hreflang" niteliği soldan başlanarak en ile başlayan, bağlaç (hyphen) ile ayrılmış değerler listesi halinde verilmiş olan bir element

Nitelik Selektörleri

2

E:root

belge kökü olan E elementi

Yapısal Pseudo-sınıflar

3

E:nth-child(n)

bir ana-baba nın-inci çocuğu olan bir E elementi

Yapısal Pseudo-sınıflar

3

E:nth-last-child(n)

sonuncudan başlanarak bir ana-baba nın-inci çocuğu olan bir E elementi

Yapısal Pseudo-sınıflar

3

E:nth-of-type(n)

tipinin n-inci torunu olan bir E Elementi

Yapısal Pseudo-sınıflar

3

E:nth-last-of-type(n)

sonuncudan başlanarak tipinin n-inci torunu olan bir E Elementi

Yapısal Pseudo-sınıflar

3

E:first-child

ana-baba'sının ilk çocuğu olan bir E elementi

Yapısal Pseudo-sınıflar

2

E:last-child

ana-baba'sının son çocuğu olan bir E elementi

Yapısal Pseudo-sınıflar

3

E:first-of-type

tipinin ilk torunu olan bir E elementi

Yapısal Pseudo-sınıflar

3

E:last-of-type

tipinin son torunu olan bir E elementi

Yapısal Pseudo-sınıflar

3

E:only-child

ana-baba'sının tek çocuğu olan bir E elementi

Yapısal Pseudo-sınıflar

3

E:only-of-type

tipinin tek kardeşi (sibling) olan bir E elementi

Yapısal Pseudo-sınıflar

3

E:empty

hiç çocuğu olmayan bir E elementi (metin düğüm noktaları dahil)

Yapısal Pseudo-sınıflar

3

E:link
E:visited

bir bağlantı (hyperlink) çapasının kaynağı olan ve hedefi henüz ziyaret edilmemiş (:link) veya ziyaret edilmiş (:visited) bir E elementi

Bağlantı Pseudo-sınıfları

1

E:active
E:hover
E:focus

bazı kullanıcı etkileri sırasında bir elementi

Kullanıcı Etkisi Pseudo-sınıfları

1 and 2

E:target

Belirtilen URI değerinin hedefi olan bir E elementi

Hedef Pseudo-sınıfı

3

E:lang(fr)

"fr" Dilinde E tipinde bir element (belge dili, dilin nasıl belirleneceğini belirtir)

lang() Pseudo-sınıfı 

2

E:enabled
E:disabled 

enabled veya disabled durumunda olan bir E kullanıcı arayüzü elementi

Kullanıcı Arayüzü Elementi Durumu Pseudo-sınıfı

3

E:checked
E:indeterminate 

tıklanmış veya belirsiz durumda olan, bir E kullanıcı arayüzü elementi (örnek olarak bir radyo düğmesi veya bir checkbox)

Kullanıcı Arayüzü Elementi Durumu Pseudo-sınıfı

3

E:contains("foo")

metin içeriğinde bir "foo" alt string değerini içeren bir E elementi

İçerik Pseudo-sınıfı

3

E::first-line

Bir E elementinin ilk formatlanmış satırı

İlk-satır Pseudo-elementi

1

E::first-letter

Bir E elementinin ilk formatlanmış harfi

İlk-harf Pseudo-elementi

1

E::selection

Bir E elementinin kullanıcı tarafından o anda seçilmiş olan kısmı

Kullanıcı Arayüzü Element Parçası Durumu Pseudo-Sınıfı

3

E::before

E elementinden önce oluşturulan içerik

:before Pseudo-elementi

2

E::after

E elementinden sonra oluşturulan içerik

:after Pseudo-elementi

2

E.warning

class niteliği "warning" olan bir E elementi (belge dili, class niteliğinin nasıl belirtileceğini bildirir)

Sınıf Selektörleri

1

E#myid

id Niteliği "myid" olan bir E elementi

ID Selektörleri

1

E:not(s)

basit bir s selektörüne uymayan bir E elementi

Uyuşmama Pseudo-sınıfı

3

E F

E elementinin soyundan gelen bir F elementi

Souyundan Gelme Birleştiricisi

1

E > F

E elementinin çocuğu olan bir F elementi

Çocuk Birleştiricisi

2

E + F

hemen ardından E elementi gelen bir F elementi

Doğrudan Bitişiklik Birleştiricisi

2

E ~ F

bir E elementinden sonra gelen bir F elementi

Dolaylı Bitişiklik Birleştiricisi

3

Etkileyici çeşitlilik içeren bir tablo, fakat açık söylenmesi gerekirse, gereksinmeden fazla seçenek sağlanmış olabilir. Bu listede, sadece CSS1 sürümü ile tanımlı selektör tipleri, desteklenme bakımından iç rahatlığı ile kullanılabilir. CSS2.1 ve CSS3 sürümleri ile tanımlanmış yeni selektör tipleri, denenmeden kullanılmamalıdır.

Büyük/Küçük Harf Duyarlılığı

 

HTML de selektör adları, sınıf ve id değerleri, küçük/büyük harf yazımına duyarlı değildir. Örnek olarak,

olarak tanımlanmış bir selektöre, hem

hem de,

hedefleri uyum sağlayacaktır.

Büyük/küçük harf duyarlılığı genel olarak yazım diline bağlıdır. HTML kodları, büyük/küçük harf yazımına duyarlı değilken, XML aşırı duyarlıdır.

HTML kodlarının, büyük/küçük harf yazımına duyarlı olmasına çok güvenmemek ve bağdaşması gereken terimlerle yazılımın olabildiğince uyumlu olmasını gözetmek daha garantili olacaktır. Yani, eğer

şeklinde bir selektör tanımlanmışsa, ve eğer yazdığınız paragrafın bu selektör tarafından kapsanması isteniliyorsa,

olarak tanımlamaya özen gösteriniz.

 

Selektör Sözdizimi

 

Bir selektör, birleştiricilerle ayrılmış, bir veya birden çok basit selektör sıralanmaları içeren bir topluluktur. Örnek

Bir basit selektör sıralanması, birleştiricilerle ayrılmamış bir basit selektör topluluğudur. Basit selektör sıralanması, her zaman bir tip selektörü veya bir evrensel selektör ile başlar, sıranın içinde başka bir tip selektörü veya evrensel selektör bulunamaz. Örnek,

Bir basit selektör, bir tip selektörü, evrensel selektör, nitelik selektörü, ID selektörü, içerik selektörü veya bir pseudo-sınıf olabilir. Bir pseudo-element, topluluğun sonundaki sıralanmanın en sonuna eklenebilir.

Birleştiriciler, (>), (+), (~) (tilde) işaretleridir. Birleştiriciler ve birleştirdikleri basit selektörler arasınada boşluk olabilir.

Selektör tarafından temsil edilen belge ağacına dahil elementler, selektörlerin hedefi olarak nitelendirilirler. Basit selektörleri içeren bir topluluğu içeren bir selektör, ortaya koyduğu kısıtları sağlayabilen her elementi temsil eder. Bu topluluğa bir birleştirici ve başka topluluklar eklemekle yeni kısıtlar ortaya konulur ve selektörün hedefleri, daima en sağda bulunan basit selektör topluluğu tarafından belirtilen elementlerin bir alt gurubu olur.

Dikkat : Hiçbir basit selektör topluluğu içermeyen boş bir selektör, geçersiz bir selektördür.

Tanımlar detaylı ve kapsamlı, pratik kullanımlar ise örneklerde görüldüğü gibi en basit şekiller halindedir.

 

Selektör Grupları

 

Aynı bildirimleri içeren selektörler, virgülle ayrılmış listeler halinde birleştirilebilirler. Örnek,

selektör ifadeleri,

ifadesi ile eşdeğerdir. Bu konuda dikkat edilecek nokta, eğer selektörlerden birisi geçersiz bir özellik bildirimi içeriyorsa, gruplandığı tüm selektörler ile birlikte geçersiz sayılacağıdır. Doğal olarak, hatalı bir selektör, başkaları ile gruplanmazsa, sadece kendisi geçersiz sayılır.

 

Basit Selektörler

 

Tip Selektörleri

 

Bir tip selektörü, belge dilinde geçerli bir element ismi verilmiş bir selektördür. Tip selektörü, belge ağacında element tipinin örneklerini temsil eder. Örnek,

Bu durumda, tüm sayfadaki <h1> elementi içerikleri kuralın belirttiği gibi, görüntülenecektir. Bir tip selektörü ile bir sınıf selektörü aşağıdaki örnekte olduğu gibi birleştirilirse,

tip selektörünün kapsamı üzerinde ek bir kısıt konulmuş olur ve selektörün hedefi, sınıfı turquoise olan <h1> elementleri ile sınırlanır.

<h1 class="turquoise">Deniz Gezileri</h1>

 

Evrensel Selektör

 

Evrensel selektör, joker karakteri olan * (asteristik) (aster sanskritçe yıldız demektir) karakteri kullanarak tüm elementleri kapsar. Kullanımda, asteristik geçerli bir element isminin yerine geçer. Örnek,

Yorumlama karışıklığı oluşturmayacak durumlarda, asteristik ihmal edilebilir, fakat spesifikasyon bunu sağlık vermez. Yine çoğu yazar asteristik kullanmaz. Örnek,

Bir diğer örnek,

Bu ifade, #takım1 ile eşdeğerdir. Burada tekrar belirtmekte yarar olabilir, bu evrensel ID selektörü, id="takım1" olarak tanımlanmış tüm selektörlere uyar, fakat her geçerli sayfada, sadece bir tane id="takım1" olan selektör olabilir.

Yukarıda da belirttğimiz gibi, evrensel selektörler, karmaşa yaratmaya yatkındır. Bir evrensel selektöre çapa elementine uygun özellikleri konulup <img> elementi ile kullanılmaya çalışılırsa belge çözümleyicinin kafası karışır ve CSS kuralını ya geçersiz sayar, ya da tuhaf bir şekilde yorumlar. Fakat belirli bir (.family) (veya *.family) selektörü oluşturur ve sadece resim özellikleri ile kullanırsanız, sadece resimler için uygun bir selektör yaratmış olursunuz. Bu durumda da, (img.family) gibi daha spesifik bir element sınıfı selektörü ile aynı sınırlı kapsamla sınırlanmış olursunuz. Yani, (.family) selektörü yerine (img.family) gibi daha spesifik bir selektör oluşturmanın farkı olmaz, çünkü ilkinin pratik, ikincisinin hem teorik hem pratik hedefi sadece sınıfı family olan <img> elementleridir.

Genel selektörler, bazı durumlarda ise, element spesifik selektörlerden daha yararlı olabilirler. Böyle bir durumun örneği aşağıda verilmiştir,

Bu örnek incelendiğinde, ".list" adlı evrensel bir selektör oluşturulduğu görülecektir. Bu selektör, hem <ol> hem de <ol> elementleri ile birlikte kullanılabilmektedir. Yukarıdaki programda basit bir kalıtım mekanizmasından yararlanılarak, tüm liste elemanlarına "list" sınıfının özellikleri kazandırılmaktadır. Aynı etki, "li.list" şeklinde bir liste elementi spesifik selektör oluşturularak da yapılabilirdi, fakat bu durumda program,

şeklinde olması gerekirdi, bu son durum, daha fazla kod yazımını gerektirdiği için kesinlikle daha avantajsızdır. Bu örnekte incelenen durum için, genel bir selektör kullanımının, spesifik bir selektör kullanımına göre, daha yararlı olacağı görülmektedir.

 

Nitelik Selektörleri

 

Nitelik Oluş ve Değer Selektörleri

 

İlk olarak [nitelik] şeklinde formüle edilebilen bir genel nitelik selektörünü inceleyeceğiz. Herhangibir nitelik belirtilebilir. Değeri ne olursa olsun, belirtilen niteliği kullanan tüm elementler bu selektörle uyum sağlarlar. Örnek,

Bu selektörün pratikte desteğini sınamak için DeneCSS3.htm dosyasının kodlarını inceleyiniz ve bu dosyayı değişik belge çözümleyicilerle çalıştırınız. Desteklemeyen:IE 6.02 SP2, Destekleyenler: Diğerleri Sonuç: Kullanılmaz.

İkinci olarak [nitelik="değer"] şeklinde bir selektörü inceleyeceğiz. Herhangibir nitelik belirtilebilir. Belirtilen nitelik ve değerine sahip olan tüm elementler bu selektörle uyum sağlarlar. Örnek,

Verilen örnekte, title Niteliklerinin değeri "Ankara" olan, tüm paragraf elementleri bu selektörle uyum sağlarlar. Bu selektörün pratikte desteğini sınamak için DeneCSS3.htm dosyasının kodlarını inceleyiniz ve bu dosyayı değişik belge çözümleyicilerle çalıştırınız. Desteklemeyen:IE 6.02 SP2, Destekleyenler: Diğerleri Sonuç: Kullanılmaz.

Bir sonraki örnek [nitelik~="değer"] şeklinde belirtilen bir selektör. Bunu selektör ile uyum sağlayacak elementin, belirtilen nitelik değeri, boşluk ile ayrılan bir değer listesi olmalı ve değerler zorunlu olarak boşluk içermemelidir. Bu liste içindeki değerlerden birisi, selektör tanımında verilen değere kesin eşit olmalıdır. Örnek,

Verilen örnekte, class niteliğinin değerinin, içlerinden birisinin "q1" olduğu, boşlukla ayrılmış bir değer listesi olan tüm paragraf elementleri bu selektörle uyum sağlarlar. Bu selektörün pratikte desteğini sınamak için DeneCSS3.htm dosyasının kodlarını inceleyiniz ve bu dosyayı değişik belge çözümleyicilerle çalıştırınız. Desteklemeyen:IE 6.02 SP2, Destekleyenler: Diğerleri Sonuç: Kullanılmaz.

Bir başka nitelik selektörü tipi, [nitelik|="değer"] değer şeklinde belirtilen bir selektör. Uygun bir elementin niteliğinin değeri tam olarak verilen değere eşit olacak veya değer ile başlayarak "-"işaretini takip eden bir alt string ile devam edecektir. bu sistem daha çok <link> elementinin hreflang niteliğinin uyuşması için kullanılmak amacı ile oluşturulmuştur.

Bazı durumlarda birden çok nitelik kısıtı içeren selektörler oluşturulabilir. Örnek,

Bazı durumlarda ise aynı elementin iki ayrı nitelik karakterine göre görüntülenmesi sağlanabilir:

Ayrıca, bir karakter dizini (string) içerdiği alt karakter dizini (altstring)(substring) uyuşmasına dayalı üç tane de alt string selektörü tanımlanmıştır:

[nitelik^=değer]

değer ile başlayan değeri olan bir nitelik

[nitelik$=değer]

değer ile biten değeri olan bir nitelik

[nitelik*=değer]

En az bir tane değer alt string örneği (instance) içeren bir değere sahip olan bir nitelik

IE desteklemediğinden, basit sınıf selektörleri dışında, nitelik selektörlerinin kullanılması şimdilik olumsuzdur.

 

Sınıf Selektörleri

 

Sınıf selektörleri IE tarafından desteklenen ve uygulamada en kolay kullanılan selektör tipleridir. Genel yapıları,

şekli IE taradından desteklenmiyor. Bunun yerine daha basit tam uyuşma şekli,

IE tarafından destekleniyor. Daha çok kullanılan şekli ile, div.pal {color:green}, div[class="pal"]{color:green} yazılımına eşdeğerdir.

Sınıf selektörleri, belge yapılanmasında bulunanve uygun sınıf değeri olan her elementin uyuşabileceği evrensel selektör olarak da belirtilebilir :

Bu ifade tarzının spesifikasyonda sağlık verilmesine karşın, uygulamada yaygın olarak,

eşdeğer yazılımı kullanılır. Çok genel selektörlerin kullanılmasındaki olumsuzluklar hatırlanırsa, sınıf selektörlerini hedefledikleri element türünün uyuşabileceği kısıtla oluşturmak daha uygun olabilir. Örnek,

Tüm bu yapılanmalar, IE de kesin desteklendiğinden rahatlıkla kullanılabilir. IE de desteklenen bir başka çoklu sınıf selektörü yapılanması,

veya eşdeğer ifade ile

prensip olarak içinde nitelik değeri, içinde carmen ve vermillon olan, boşlukla ayrılmış bir değerler listesi olan her her elementi kapsayacaktır. Örnek,

Çoklu sınıf yapılanmasına ait bir başka tür bir örnek aşağıda verilmektedir:

Buradaki paragraf, hem carmen, hem de underline evrensel sınıf selektörlerinin belirttiği kuralları uygulayacak, yani altı çizgili kırmızı renkte metin görüntüleyecektir. Bu ifade şekli, IE ve diğer belge çözümleyicilerin son sürümleri tarafından desteklenmektedir.

Özet olarak, sınıf selektörleri en kolay kullanılabilen CSS selektörleridir. Çok genel ve çok özel selektörlerin kullanılmasının bazı sakıncaları olabilir. Belirli tipleri hedefleyen sınıf selektörleri ise ne çok genel, ne de çok özel olduklarından, kullanım için ideal sayılabilirler. Kullanımı en yaygın belge çözümleyici olduğundan, IE tarafından desteklenmeyen hiçbir yapılanmanın, uygulamalarda kullanılması doğru değildir.

 

id (Kimlik) Selektörleri

 

HTML belgelerinde elementlerin kimlikleri id niteliği ile belirlenir ve bir belge yapısı içinde, aynı kimlik değerine sahip iki tane element bulunamaz. Bu nedenle bir selektöre belirli bir id değerine sahip bir element uyuşacak ise bu element hangi türden olursa olsun, geçerli belge HTML kodu içinde sadece bir tane olabilir.

En genel id selektörü, *#suadiye {stil kuralları} şeklindedir. Bu ifade şekli, #suadiye {stil kuralları} şekli ile eşdeğerdir. Bu selektöre, id değeri "suadiye" olan her element uyum sağlayacaktır. Örnek,

Daha özel bir id selektörü, element türü gözeterek uyuşma arayan id selektörüdür. CSS ifadesi,

şeklinde olacaktır. Bu selektör,

paragrafı tarafından değerlendirilebilecektir.

Bu ifadeler, IE 6.02 SP2 ile diğer belge çözümleyicilerin son sürümleri tarafından desteklenmektedir.

Thursday, October 6, 2005 19:29

 

validate in W3C !