A’dan Z’ye Tüm CSS Seçicileri

Bu yazıda bulunan seçicileri ile CSS’de stillendirmek istediğiniz elemanları nasıl seçeceğinizi anlatacağız. Aşağıdaki tablo sayesinde seçicinin yapısını örnek ve açıklama sayesinde kolaylıkla anlayabilirsiniz, bu yeterli olmaz ise ilgili seçiciye özel olarak hazırladığımız detaylı anlatımlardan faydalanabilirsiniz.

Kaynak niteliğindeki bu tablo CSS’e yeni seçiciler geldiğinde güncellenecektir, bu nedenle sık sık CSS seçicileri ile işiniz oluyorsa bu sayfayı sık kullanılanlarınıza eklemeyi unutmayın.

SeçiciÖrnek Açıklama CSS Detaylı Anlatım
.class.introTüm class=”intro” elementlerini seçer.1Yakında Eklenecek
#id#firstname Tüm id=”firstname” elementlerini seçer.1Yakında Eklenecek
**Tüm Nesneleri Seçer.2Yakında Eklenecek
elementpTüm p elementlerini seçer.1Yakında Eklenecek
element, elementdiv, pTüm div elementleri ile birlikte p elementlerini de seçer.
1Yakında Eklenecek
element elementdiv pdiv elementi içerisindeki tüm p elementlerini seçer. 1Yakında Eklenecek
element > elementdiv > pEbeveyni sadece div olan p elementlerini seçer.2Yakında Eklenecek
element + elementdiv + pdiv elementin hemen sonra gelen ilk p elementini seçer.2Yakında Eklenecek
element ~ elementp ~ ul p elementinden sonra gelen aynı katmandaki tüm ul elementlerini seçer.
3Yakında Eklenecek
[attribute] yani
element[nitelik]
[title] yani
h3[title]
Hedef niteliğe sahip tüm elemanları seçer.
Örnekte [title] niteliğine sahip h3 elemanlarını seçiyor.
2Yakında Eklenecek
[attribute=value] yani
element[nitelik=”değer”]
[target=”_blank”] yani
a[target=”_blank”]
Hedef nitelik değeri ile eşleşen elemanları seçer.
Örnekte target değeri _blank olan a elemanlarını seçiliyor.
2Yakında Eklenecek
[attribute~=value] yani
element[nitelik~=”değer”]
[title~=”codex”] yani
h3[title~=”codex”]
Nitelik değerinde bulunan kelimeye sahip elemanlar seçilir.
Örnek title değerinde codex kelimesi geçen h3 elemanlarını seçiyor.
2Yakında Eklenecek
[attribute|=value] yani
element[nitelik |=”değer”]
[lang|=”tr”]Niteliğe değeri ile başlıyor ve sonunda var ise seçer.
Örnek lang değeri tr ile başlayan tüm elementleri seçer.
2Yakında Eklenecek
[attribute^=value] yani
element[nitelik^=”değer”]
a[href^=”https”]Nitelik değer ile başlıyorsa seçilir.
Örnek href değeri https ile başlayan tüm a elemanlarını seçiyor.
3Yakında Eklenecek
[attribute$=value] yani
element[nitelik$=”değer”]
a[href$=”.pdf”]Nitelik değer ile bitiyorsa seçilir.
Örnek href değeri .pdf ile biten tüm a elemanlarını seçiyor.
3Yakında Eklenecek
[attribute*=value] yani
element[nitelik*=”değer”]
a[href*=”codex”]Kelime olmaksızın nitelik değerini içeren elemanlar seçilir.
Örnek href değerinde codex geçen a elemanlarını seçiyor.
3Yakında Eklenecek
:activea:activeTıklandığında ve basılı tutulduğunda aktif a elemanını seçer.1Detaylı anlatım
::afterp::afterTüm p elemanlarının içeriğinin sonuna bir şey ekler.2Yakında Eklenecek
::beforep::beforeTüm p elemanlarının içeriğinin başına bir şey ekler.2Yakında Eklenecek
:checkedinput:checkedİşaretlenmiş/Seçilmiş tüm input elemanlarını seçer.3Yakında Eklenecek
:defaultimput:defaultVarsayılan input elemanını seçer.3 Yakında Eklenecek
:disabledinput:disabledEngellenmiş tüm input elemanlarını seçer.3Yakında Eklenecek
:emptyp:emptyİçerisinde hiç bir şey olmayan tüm boş p elemanlarını seçer.3Yakında Eklenecek
:enabledinput:enabledEtkin olan tüm input elemanlarını seçer.3Yakında Eklenecek
:first-childp:first-childEbeveyninin ilk çocuğu olan p elemanını seçer.2Detaylı anlatım
::first-letterp::first-letterTüm p elemanlarının ilk harfini seçer.1Yakında Eklenecek
::first-linep::first-lineTüm p elemanlarının ilk satırını seçer.1Yakında Eklenecek
:first-of-typep:first-of-typeAynı hiyerarşide bulunan ilk p elemanlarının seçer.3Yakında Eklenecek
:focusinput:focusOdaklanan input elemanını seçer.2Yakında Eklenecek
:hovera:hoverÜstüne gelinen a elemanını seçer.1Yakında Eklenecek
:in-rangeinput:in-rangeBelirtilen aralıkta bir değere sahip ise input elemanını seçilir.3Yakında Eklenecek
:indeterminateinput:indeterminateBelirsiz bir durumda olan input elemanını seçer.3Yakında Eklenecek
:invalidinput:invalidBelirtilen değere sahip değil ise input elemanını seçilir.3Yakında Eklenecek
:lang(language)p:lang(tr)p elemanına atanan lang değeri tr ise seçer.2Yakında Eklenecek
:last-childp:last-childEbeveyninin son çocuğu olan p elemanını seçer.3Detaylı Anlatım
:last-of-typep:last-of-typeAynı hiyerarşide bulunan son p elemanlarının seçer. 3Yakında Eklenecek
:linka:linkZiyaret edilmemiş tüm a elemanlarını seçer.1Yakında Eklenecek
:not(selector):not(p)p elemanı olmayan tüm elemanları seçer.3Yakında Eklenecek
:nth-child(n)p:nth-child(2)p elemanının 2.sini seçer.3Detaylı anlatım
:nth-last-child(n)p:nth-last-child(2)p elemanının sondan 2.sini seçer.3Detaylı anlatım
:nth-last-of-type(n)p:nth-last-of-type(2)Aynı hiyerarşide bulunan sondan 2. p elemanını seçer.3Yakında Eklenecek
:nth-of-type(n)p:nth-of-type(2)Aynı hiyerarşide bulunan 2. p elemanını seçer.3Yakında Eklenecek
:only-of-typep:only-of-typeAynı hiyerarşide tek olan p elementini seçer.3Yakında Eklenecek
:only-childp:only-childEbeveyni tek olan p elementini seçer.3Yakında Eklenecek
:optionalinput:optionalZorununlu olmayan (required niteliği almamış) input elemanlarını seçer.3Yakında Eklenecek
:out-of-rangeinput:out-of-rangeBelirtilen aralıkta bir değere sahip değil ise input elemanını seçilir.3Yakında Eklenecek
::placeholderinput::placeholderYer tutucu metni içeren input elemanlarını seçer.3Yakında Eklenecek
:read-onlyinput:read-onlyreadonly niteliği taşıyan input elemanlarını seçer.
(mozilla için :-moz-read-only gerekir)
3Yakında Eklenecek
:read-writeinput:read-writereadonly niteliği taşımayan input elemanlarını seçer.
(mozilla için :-moz-read-write gerekir)
3Yakında Eklenecek
:requiredinput:requiredZorununlu olan (required niteliği almamış) input elemanlarını seçer. 3Yakında Eklenecek
:root:rootBelgenin kök elemanı olan tagını seçer.3Yakında Eklenecek
::selection::selectionKullanıcı tarafından fare ile seçilen yazıyı seçer.3Yakında Eklenecek
:target#news:target
news adını içeren bir URL’ye tıklandığında geçerli #news elementi seçilir.3Yakında Eklenecek
:validinput:validBelirtilen değere sahip ise input elemanını seçilir.3Yakında Eklenecek
:visiteda:visitedZiyaret edilmiş tüm a elemanlarını seçer.1Yakında Eklenecek

5
Bir yorum yap yada bir soru sor.

avatar
3 Yorum konuları
2 Konu cevapları
0 Takipçiler
 
En çok beğenilen yorum dizilişi
En iyi yorum dizilişi
4 Yorum yazarları
Murat DinçTuranishanaÜsküdar Son yorum yazarları
  Yorumlara Abone Ol  
Önce Yeniler Önce Eskiler Önce Beğenilenler
Bildir
Üsküdar
Üsküdar

Murat Bey, CSS için güzel bir derleme olmuş. Örnek ve açıklamalar da kodu anlamamız için gayet açıklayıcı. Tabloyu bikgisayarımda bir yerlere kaydedip ara ara açmam gerekecek. Güncel tutabilmek de önemli tabi. Sizden ricam; tablo içeriğini ara ara guncellerseniz gelir güncel tabloyu sizden alırım 😀 Güzel paylaşımlar ile codex’in geri dönmüş olması sevindirici. Selamlarımla..

ishana
ishana

css kataloğu oluşturmanız yerinde bir uygulama. hem site içi SEO için hem de biz kullanıcılar için. arama motorlarının sevdiği tarzda bir çalışma. zaten daha önce de sitenizde Css konularını öğrencilerime kaynak olarak göstermiştim. kataloğun tamamlanmasını dört gözle bekliyorum.

Turan
Turan

Hem listenin içeriği hem de format çok faydalı olacağa benziyor. Yakında eklenecekleri de sabırsızlıkla bekliyorum. Eklediklerinizde de örneklerle detaylı bir anlatım yapmışsınız. Birçok sitede bu netlikte bulabilmek mümkün değil.