Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

Ezberlemeniz Gereken 30 CSS Seçicisi

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called CSS3 Mastery.
10 CSS3 Properties you Need to be Familiar With
Getting to Work with CSS3 Power Tools

Turkish (Türkçe) translation by Nevres Emre Alsancak (you can also view the original English article)

Temel id, class ve descendant seçicilerini öğrendiniz - ve bu iş bu kadarmı dediniz? Eğer öyleyse, çok ileri seviyede bir esneklikliği kaybediyosunuz demektir. Bu yazıda adı geçen seçicilerden çoğu CSS3 spesifikasyonunun bir parçasıdır ve dolayısıyla yalnızca modern tarayıcılarda mevcuttur ama bunları hafızanıza almanız boynunuzun borcudur.

1. *

Daha ileri seviye seçicilere geçmeden önce yeni başlayanlar için en temel olanları bi aradan çıkaralım.

Yıldız sembolü sayfadaki her bir öğeyi seçer. Çoğu yazılımcı, margin ve paddingleri sıfırlamak için bu numarayı kullanacaktır. Çabuk testler için uygun olmasına rağmen, bunu asla yayın kodunuzda kullanmamanızı öneririm. Tarayıcıya çok fazla yük bindirir ve gereksizdir.

* ayrıca çocuk seçicilerle birlikte kullanılabilir.

Bu #container div öğesinin altındaki her bir çocugu hedefleyecektir. Yine bu tekniğide çok fazla kullanmamaya çalışın, mümkünse hiç kullanmayın.

Demo'yu Gör

Uyumluluk

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

2. #X

Kare sembolünü seçicinin önüne ekleyerek kimlik(id)'ye göre hedefleme yapabiliriz. Bu en yaygın kullanımdır, ama id seçicilerini kullanırken dikkatli olun.

Kendinize şunu sorun: Ben bu elementi hedeflemek için kesinlikle id'mi uygulamak zorundayım?

id seçicileri esnek değildir ve birden fazla kullanıma izin vermez. Mümkünse, yeni HTML5 öğelerinden biri olan bir etiket adı(tag name) veya takma sınıf kullanmayı deneyin.

Demo'yu Gör

Uyumluluk

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

3. .X

Bu bir class(sınıf) seçicidir. id ve class seçicicileri arasındaki fark, ikincisini birden fazla öğede kullanabilirsiniz. Bir öğe grubuna stil uygulamak istediğinizde class'ları kullanın." Alternatif olarak, samanlıkta bir iğne bulmak ve sadece o öğeye bir stil vermek istiyorsanız id'yi kullanın.

Demo'yu Gör

Uyumluluk

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

4. X Y

Sonraki en yaygın seçici, descendant(torun)seçicisidir. Seçicilerinizde daha spesifik olmanız gerektiğinde bunları kullanırsınız. Örneğin, tüm link(anchor) etiketlerini hedeflemek yerine yalnızca sırasız bir listede yer alan link etiketlerini hedeflemeniz gerekirse ne olur? İşte bu torun seçici kullanacağınız zamandır.

Pro-ipucu - Seçiciniz X Y Z A B.error gibi görünüyorsa, yanlış yapıyorsunuz demektir. Her zaman kendinize bu kadar yükü eklemelimiyim diye sorun.

Demo'yu Gör

Uyumluluk

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

X

Bir sayfadaki tüm öğeleri id'sine veya class'ına göre değilde türüne(type) göre hedeflemek isterseniz ne olur? İşi basit tutun ve bir tür seçicisi kullanın. Tüm sırasız listeleri hedeflemeniz gerekiyorsa, ul {} kullanın.

Demo'yu Gör

Uyumluluk

  • IE6+
  • Firefox
  • Chome
  • Safari
  • Opera

6. X:visited and X:link

Henüz tıklanmamış olan tüm libk etiketlerini hedeflemek için :link takma-sınıfını kullanıyoruz.

Alternatif olarak, :visited takma sınıfıda sayfadaki sadece tıklanan veya ziyaret edilen link etiketlerine ulaşıp stil uygulamamızı sağlar.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

7. X + Y

Buna komşu seçici denir. Yalnızca, önceki öğenin hemen sonrasında bulunan öğeyi seçecektir. Bu örnekte, her ul'den sonraki ilk paragraf yalnızca kırmızı metin olacaktır.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

8. X > Y

Standart X Y ile X > Y arasındaki fark, ikincisi direk çocukları seçecektir. Örneğin, aşağıdaki koda bakın.

#container> ul seçicisi, yalnızca id'si container olan bir div'nin direk çocukları olan ul'leri hedefleyecektir. Örneğin, ilk li'in çocuğu olan ul'yi hedef almayacaktır.

Bu sebepden, çocuk kombinasyonunu kullanmanın performans yararları vardır. Özellikle JavaScript tabanlı CSS seçici motorlarla çalışırken aslında bu önerilmektedir.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

9. X ~ Y

Bu kardeş kombinasyon X + Y'ye benzer, ama daha az kuralcıdır. Bitişik seçici (ul + p), yalnızca ilk seçicinin hemen sonrasındaki ilk öğeyi seçerken, bu daha geneldir. Örneğimiz üzerinden gidersek, bu seçici ul'den sonra gelen herhangi bir p öğesini seçecektir.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

10. X[title]

Bir nitelik seçici olarak adlandırılan bu seçici, yalnızca bir title(başlık) özelliğine sahip olan link etiketleri seçecektir. Bu özellik olmayan link etiketleri hiçbir şekilde bu stillemeyi almayacaktır. Ama, daha spesifik olmanız gerekiyorsa? O zaman...

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

11. X[href="foo"]

Yukarıdaki kod http://net.tutsplus.com adresine sahip bütün link etiketlerine stil vermenizi sağlayacaktır. Hepsi markalı yeşil rengimizi alacaklar. Diğer bütün link etiketleri bundan etkilenmeyecek.

Değeri tırnak işaretleri içine yazdığımızı unutmayın. Bir JavaScript CSS seçici motor kullanırken bunu yapmayıda da unutmayın. Mümkün olduğu sürece daima resmi olmayan yöntemler yerine CSS3 seçicileri kullanın.

Bu iyi işe yarıyor, ama biraz katı. Ya link gerçekten Nettuts + 'a gidiyorsa  ama yol belki bütün url değilde nettuts.com ise? Bu gibi durumlarda, bi parça kurallı ifadeler sözdizimi(regular expressions syntax)  kullanabiliriz.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

12. X[href*="nettuts"]

İşte ihtiyacımız olan bu. Yıldız tırnak içindeki değerin özelliğin içinde bir herhangi bir yerde bulunması gerektiğini belirtir. Böylece nettuts.com, net.tutsplus.com ve hatta tutsplus.com'un hepsine kapsar.

Ancak bunun genel bir ifade olduğunu unutmayın. Ama link etiketi, Envato sitelerinden farklı url'inde tuts içeren başka bir siteye link veriyorsa ne olur? Daha spesifik olmanız gerektiğinde bir dizenin başını ve sonunu işaretlemek için ^ ve $ kullanın.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

13. X[href^="http"]

Hiç bazı web sitelerinin harici linklerin yanında nasıl küçük bir ikon görüntüleyebildiğini merak ettiniz mi? Eminim bunları daha önce görmüşsünüzdür; Bağlantıların sizi tamamen farklı bir web sitesine yönlendireceğini gösteren güzel işaretlerdir.

Bu karat(^) sembolü ile oldukça kolaydır.  Bu kurallı ifadelerde dizinin başlangıcını belirtmek için oldukça sık kullanılan bir yöntemdir. httpile başlayan bir href'e sahip olan tüm link etiketlerini hedeflemek istiyorsak, yukarıda gösterilen koddaki gib bir seçici kullanabiliriz.

http:// için arama yapmadığımıza dikkat edin; Bu gereksizdir ve https:// ile başlayan url'leride hesaba katmaz.

Peki şimdi, örneğin bir fotoğrafa link veren tüm linklere stil vermek istediysek? Böyle durumlarda, dizenin sonunu arayalım.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

14. X[href$=".jpg"]

Tekrar, kurallı ifadeler sembolunu olan $ kullanarak dizenin sonunu hedefleyebiliriz. Bu durumda, bir resime link veren tüm link etiketlerini veya  en azından .jpg ile biten bir url'i arıyoruz. Bunun gif'ler ve png'ler için kesinlikle çalışmayacağını unutmayın.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

15. X[data-*="foo"]

Sekiz numaraya geri dönün; png, jpeg, jpg, gif, gibi çeşitli imaj türlerinin hepsini nasıl kapsarız? Bir yol, herbiri için aşağıdaki gibi seçici yaratabiliriz.

Ama bu biraz mantık dışı ve verimsiz. Diğer bir yol, özel nitelikler(custom attributes) kullanmaktır. Bir imaja link veren her bir link etiketine data-filetype özelliği verirsek ne olur?

Ardından, bu kanca yoluyla, yalnızca bu linkleri hedeflemek için standart nitelik seçiciyi kullanabiliriz.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

16. X[foo~="bar"]

İşte arkadaşlarınızı etkileyecek özel bir tane. Bu numarayi pek fazla insan bilmez. Tilde (~) sembolü, boşluklarla ayrılmış değerler listesine sahip bir niteliği hedeflememizi sağlar.

On beşinci sıradaki özel niteliğimiz üzerinden devam edersek , dikkat etmemiz gereken şeylerin boşluklarla ayrılmış bir listesini sahip bir data-info niteliği oluşturabiliriz. Bu durumda, örneğin harici linkler ve resim linklerini göz önünde bulunduralım.

Yukarıdaki kod ile, ~ attributes seçici numarasını kullanarak bu değerlerden herhangi birine sahip herhangi bir etiketi hedefleyebiliriz.

Oldukça güzel dimi?

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

17. X:checked

Bu takma sınıf, aktif hale gelen bir kullanıcı arabirimi öğesini (bir radyo düğmesi veya onay kutusu gibi) hedefleyecektir. Bu kadar basit.

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

18. X:after

Önce(before) ve sonra(after) takma sınıfları superdir. Her geçen gün insanlar, onları daha etkili bir şekilde kullanmanın yeni ve yaratıcı yollarını bulmaktadır. Seçilen öğenin etrafında içerik oluşturmaya olanak sağlarlar.

Birçok kişi, bu sınıflarla clear-fix hack'i ile karşılaştıklarında tanıştı.

Bu hack, öğe ardına bir boşluk eklemek için :after takma sınıfıni kullanır ve daha sonra onu temizler. Özellijke overflow: hidden; methodunu kullanamadığınız zamanlarda araç kutunuzda olması gereken mükemmel bir numaradır.

Bunun başka bir yaratıcı kullanımı için, gölgeler oluşturmak için hızlı ipucu yazıma bakın.

CSS3 Seçicileri spesifikasyonuna göre, teknik olarak iki iki nokta üst üste  ::  kullanmalısınız. Ama uyumluk bakımından, tarayıcı(user-agent) tek iki nokta üst üste kullanımınıda kabul edecektir. Aslında artık projelerinizde tek-kolon versiyonunu kullanmak daha akıllıca.

Uyumluluk

  • IE8+
  • Firefox
  • Chrome
  • Safari
  • Opera

19. X:hover

Ah, hadi ama. Bunu biliyorsunuz. Bunun resmi terimi kullanıcı eylem takma sınıfıdır(user action pseudo class). Biraz kafa karıştırıcı gibi ama aslinda değil. Bir kullanıcı bir öğenin üzerine fare ile geldiğinde belirli bir stil uygulamakmı isitiyorsunuz? Bu işinizi görecektir.

Şunu akılınızda tutun, Internet Explorer'ın eski versiyonları sadece link etiketlerine :hover takma sınıfı uygulamanıza olanak verir, diğer etiketlerde herhangi bir etki olmayacaktır.

Bu seçiciyi genellikle, örneğin, link etiketlerinin üzerine gelindiğinde border-bottom  uygulamak için kullanacaksınız.

Pro-İpucu - border-bottom: 1px solid black; text-decoration: underline; 'dan daha iyi gözükür.

Uyumluluk

  • IE6+ (IE6'da, :hover link ögesine uygulanmalıdır)
  • Firefox
  • Chrome
  • Safari
  • Opera

20. X:not(selector)

Bu negasyon takma sınıfı özellikle yararlıdır. Diyelimki id'si container olan div'ler dışındaki bütün div'leri seçmek istiyorum. Yukarıdaki kod bu görevi mükemmel bir şekilde halledecektir.

Yada paragraf etiketleri dışındaki bütün etiketleri seçmek(önerilmez) istersek;

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

21. X::pseudoElement

Pseudo elemanlarını(:: ile belirlenir) kullanarak bir öğenin ilk satırı veya ilk harfi gibi belli bir parçasına stil uygulamanızı sağlar. Bunların etkili olması için block seviyesi öğelere uygulanması gerektiğini unutmayın.

Bir pseudo-eleman iki kolondan oluşur: ::

Bir Paragrafın Birinci Harfini Hedefleyin

Bu kod sayfa üzerindeki bütün paragrafları bulup sadece birinci harflerini hedefleyecektir.

Bu, çoğunlukla bir makalenin ilk harfine gazete benzeri bir tasarım uygulamak için kullanılır.

Bir Paragrafın İlk Satırını Hedefleyin

Benzer şekilde, :: first-line elemanı, beklendiği gibi yalnızca öğeninin ilk satırını biçimlendirir.

"Mevcut style sheets'lerle uyumluluk için tarayıcılar CSS 1 ve 2 versiyonlarında sunulan  takma elemanlar için önceki bir tek kolonlu gösterimide (yani: :first-line, :first-letter, :before ve :after) kabul etmektedir.. Bu uyumluluk, bu CSS spesifikasyonu ile gelen yeni elemanlar için geçerli değildir. " - Kaynak

Demo'yu Gör

Uyumluluk

  • IE6+
  • Firefox
  • Chrome
  • Safari
  • Opera

22. X:nth-child(n)

Bir yığın içerisindeki belirli öğeleri hedeflemenin hiçbir yolunun olmadığı günleri hatırlıyormusunuz? nth-child takma sınıfı bunu çözer!

nth-child'ın parametre olarak tam sayı kabul ettiğini lütfen unutmayın; ancak bu sıfır tabanlı değildir. İkinci liste elemanını hedeflemek isterseniz, li:nth-child(2) kullanın.

Bunu değişken bir çocuk kümesi seçmek için bile kullanabiliriz. Örneğin, her dördüncü liste öğesini seçmek için li:nth-child(4n) kullanabiliriz.

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

23. X:nth-last-child(n)

İçinde çok öğe olan büyük bir ul listeniz varsa ve yalnızca sondan 3. öğeye erişmek isterseniz ne olur? li:nth-child(397) yerine, nth-last-child takma sınıfını kullanabilirsiniz.

Bu teknik yukarıdaki on altı numaradakiyle hemen hemen aynı şekilde çalışır, ancak farkı, koleksiyonun sonundan başlayarak başa doğru gitmesidir.

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

24. X:nth-of-type(n)

Bir çocuğun(child) seçilmesi yerine, elemanın türüne(type) göre seçim yapmanız gereken zamanlar olacaktır.

Beş sırasız liste içeren bir kod parçası düşünün. Sadece üçüncü ul'yi stillemek istiyorsunuz ve diyelimki hedefleyecebileceğiniz bir id'side yok, o zaman nth-of-type(n) takma sınıfını kullanabilirsiniz. Yukarıdaki kodda yalnızca üçüncü ul'in etrafında bir çerçeve olacaktır.

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari

25. X:nth-last-of-type(n)

Ve evet tutarlılığı bozmamak için nth-last-of-type'ı kullanarakda sondan başlayarak istediğimiz elemana ulaşabiliriz.

Uyumluluk

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

26. X:first-child

Bu yapısal takma sınıf, yalnızca öğenin ebeveyninin ilk çocuğunu hedeflememizi sağlar. Genellikle ilk ve son liste maddelerinden çerçevelerini kaldırmak için bunu kullanacaksınız.

Örneğin, bir satır listeniz olduğunu ve her birinin bir border-top ve border-bottom'ı olduğunu varsayalım. Bu durumda, o satırların ilk ve son kalemi biraz tuhaf görünecektir.

Birçok tasarımcı bunu telafi etmek için ilk(first) ve son(last) sınıfları uygular. Bunun yerine, bu takma sınıfları kullanabilirsiniz.

Demo'yu Gör

Uyumluluk

  • IE7+
  • Firefox
  • Chrome
  • Safari
  • Opera

27. X:last-child

first-child'ın tersi olan last-child, öğenin ebeveyninin son öğesini hedefleyecektir.

Örnek

Bu sınıfların kullanımını göstermek için basit bir örnek oluşturalım. Stillendirilmiş bir liste öğesi yaratacağız.

Kod

Burada özel bir şey yok; sadece basit bir liste.

CSS

Bu stil bir arka plan oluşturacak, ul'deki  varsayılan tarayıcı padding'i kaldırıp biraz derinliği sağlamak için her li'ye çerceve(border) uygulayacaktır.

Styled List

Listenize derinlik eklemek için, her bir li'ye,  li'nin arka plan renginden bir-iki renk daha koyu olan bir border-bottom uygulayın. Sonra, biraz daha açık tonda border-top uygulayın.

Tek sorun, yukarıdaki resimde görülebileceği gibi, çerçeve(border) listenin üst ve altınada uygulanacaktır ve bu çokda hoş durmuyor. :first-child ve :last-child takma sınıfları ile bunu çözelim.

Fixed

İşte bu; sorun düzeldi!

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

Evet - IE8 :first-child'ı destekliyor ama :last-child'ı desteklemiyor. Değişik.

28. X:only-child

Açıkcası only-child(tek çocuk) takma sınıfını sık sık kullanmayacaksınız. Yine de, ihtiyacınız olduğunda kullanılabilir.

Ebeveyninin tek çocuğu olan öğeleri hedeflemenize izin verir. Örneğin, yukarıdaki kodu referans alarak, yalnızca div'nin tek çocuğu olan paragraf kırmızı renkte olacaktır.

Aşağıdaki koda bir bakalım.

Burda sadece birinci div'in paragrafları hedeflenecek ikinci div'inkiler değil. Bir öğeye birden fazla çocuk eklediğinizde, only-child takma sınıfı artık etkisini kaybeder.

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox
  • Chrome
  • Safari
  • Opera

29. X:only-of-type

Bu yapısal takma sınıf bazı zeki yollarla kullanılabilir. Ana evebeyn konteyneri içinde kardeşi olmayan öğeleri hedefleyecektir. Örnek olarak, tek bir liste öğesine sahip tüm ul'leri hedef alalım.

Öncelikle, kendinize bunu nasıl başaracağınızı sorun? ul li yapabilirsiniz ama bu tüm liste öğelerini hedef alacaktır. Tek çözüm, only-of-type kullanmaktır.

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

30. X:first-of-type

first-of-type, türünün ilk kardeşlerini seçmenize izin verir.

Bir Test

Bunu daha iyi anlamak için bir test yapalım. Aşağıdaki kodu kod editörünüze kopyalayın:

Şimdi, okumaya devam etmeden önce sadece "List Item 2"yi nasıl hedefleyeceğinizi bulmaya çalışın. Çözümü bulduysanız(veya bulmaktan vazgeçtiyseniz), okumaya devam edin.

1. Çözüm

Bu testi çözmenin birden çok yolu var. Bir kaç tanesini gözden geçirelim. first-of-type'ı kullanarak başlayalım.

Bu kod kısaca, "sayfadaki ilk sırasız listeyi bul, daha sonra yalnızca liste öğeleri olan en yakın olan çocukları bul" diyor. Sonrada, bu bulunan setteki sadece ikinci liste öğesine göre filtreleme yapılıyor.

2. Çözüm

Başka bir seçenek, bitişik seçiciyi kullanmaktır.

Bu senaryoda, p etiketinin hemen sonrarsındaki ul'yi buluruz ve daha sonrada öğenin son çocuğunu buluruz.

3. Çözüm

Bu seçicilerle istediğimiz kadar kötü niyetli veya eğlenceli olabiliriz.

Bu sefer sayfadaki ilk ul'ı kapıyoruz ve alttan başlayarak ilk liste öğesini buluyoruz. :)

Demo'yu Gör

Uyumluluk

  • IE9+
  • Firefox 3.5+
  • Chrome
  • Safari
  • Opera

Sonuç

Internet Explorer 6 gibi daha eski tarayıcıları hedef alıyorsanız bu yeni seçicileri kullanırken dikkatli olmalısınız. Ancak bunun bu yeni seçicileri öğrenmenizi engellemesine izin vermeyin. Kendinize büyük bir kötülük yapıyor olursunuz. Tarayıcı uyumluluk listesi için burayı ziyaret edin. Alternatif olarak Dean Edward'ın mükemmel IE9.js kodu ile bu seçicilere eski tarayıcılarında destek vermesini sağlayabilirsiniz.

İkinci olarak, oldukça yaygın jQuery gibi JavaScript kütüphaneleri ile çalışıyorsanız, kütüphanenin özel yöntemleri / seçicileri yerine her zaman bu öz CSS3 seçicilerini kullanmaya çalışın. Seçici motoru, kendisininkinin yerine tarayıcının kendi öz çözümlemecisini kullanabileceğinden, kodunuzu daha hızlı hale getirecektir.

Okuduğunuz için teşekkürler, ve umarım size bir iki şey öğretebilmişimdir.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.