Bu yazının ilk kısmına buradan ulaşabilirsiniz.

Daha önceki yazımda CSS’ in az bilinen özelliklerinden bazılarını incelemiştim. Geri kalanını da burada göstermeye çalışacağım.
Önceki yazıda gösterdiklerimi hatırlayalım:

• !IMPORTANT ifadesi
• Yazıtipi entegre etme (içerme)

Bu yazıda da CSS özelliklerini uygulamak istediğimiz elementleri belirtmemizi sağlayan seçicileri inceleyeceğiz. Tabi ki az bilinenleri.

ID Selector, Class Selector ve Tag Selector’ ı zaten biliyoruz ve kullanıyoruz. Bir de bunların birlikte kullanılmasıyla oluşan Birleşik kullanım var. Bilinmesine rağmen yine de bunlarla alakalı örnek vermeliyim diye düşünüyorum.

/* ID Selector */
#foo { font-size:1.2em; }
/* Class Selector */
.foo { color : #BBB; }
/* Tag Selector */
a { text-decoration:none; }

Birleşik Kullanım

Yukarıdaki ifadeleri birlikte kullanarak daha spesifik sonuçlar alabiliriz. Örneğin alttaki örnek ile “.foo” sınıfına sahip elementlerin altındaki tüm “a” taglarına (yani linklere) etki edebiliriz.

.foo a { font-size: 16px; color: #333; }

Birleşik kullanımda bir de “>” işareti vardır. Bu işareti kullanmak ile kullanmamak arasında ki farkı şöyle anlatayım.

Açıklamak gerekirse; “div a” ifadesi, “div” tagı altındaki tüm “a” taglarına hitap eder. Burası tamam.
“div > a” ifadesinin tek farkı ise “div” tagının hemen altındaki “a” taglarına hitap etmesi. Yani “div” altındaki “span” tagının altındaki “a” elementini etkilemez.

Aynı kurala birden fazla seçicinin hitap etmesi

CSS’ in böyle bir özelliği desteklemesi bizim aynı kuralları farklı elementler için tekrar tekrar yazmamızı engeller. Diyelim ki; “.foo” içerisindeki “a” elementleri ile “#bar” elementinin aynı stile sahip olmasını istiyoruz. Bu iki seçiciyi virgül(,) ile ayırarak bunu gerçekleştirebiliriz. Örnek:

.foo a, #bar { font-size:13px; margin-left:5px; }

Element özniteliklerine göre stiller

CSS’ te kural belirlerken bir elementin id, class dışındaki diğer özniteliklerine göre de davranmasını sağlayabiliriz. Örneğin, bir form içerisinde, sadece yazı kutulaının genişliğini değiştirmek istersek;

form input[type=text] { width:150px; }

Bu seçicilerde Düzenli ifadelerde kullanabiliriz. Örneğin, sayfamızda bulunan bağlantılardan, “www.sinanyil.com” a gidenleri kahverengi olarak renklendirmek istersek.

a[href*="www.sinanyil.com"] { color:brown; }

Yukarıda ki CSS kuralını kullandığımızda “www.sinanyil.com”a (yani benim siteme) gelen bağlantılar kahverengi gözükecektir.
Düzenli ifade olarak kullanabileceğiniz bazı ifadeleri sıralarsak:

• [rel] : “rel” adlı bir özniteliği tanımlanmış elementler, Örnek : <span rel=”"></span>
• [rel=match] : “rel” özniteliğinin değer “match” olan elementler, Örnek : <span rel=”match”></span>
• [rel^=match] : “rel” özniteliği “match” ile başlayan elementler, Örnek : <span rel=”matcher”></span>
• [rel$=match] : “rel” özniteliği “match” ile biten elementler, Örnek : <span rel=”twomatch”></span>
• [rel*=match] : “rel” özniteliği “match” içeren, Örnek : <span rel=”twomatcher”></span>
• [rel~=match] : “rel” özniteliğindeki değerlerden biri “match” olan elementler, Örnek : <span rel=”other match”></span>

Düzenli ifadeler ile alakalı kaynaklar:
http://e-bergi.com/2008/Mayis/Duzenli-Ifadeler-1
http://www.csharpnedir.com/articles/read/?id=129

Daha devamı var

Yine uzun bir yazı oldu. Ama CSS özellikleri saymakla hala bitmedi. Bir makale daha dolduracak özellik var elimde. Konuyu bulduktan sonra yazmakta zor olan birşey yok aslında. Bir sonraki yazıda Pseudo Elementlerini inceleyeceğim. Bence merakla beklemelisiniz.

Popularity: 16%