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 Yorum

  1. Cevap yaz

    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..

    • Cevap yaz

      CSS’in yeni sürümleri olur da yeni seçiciler gelir ise muhakkak tabloyu günceller, bu seçiciler ile ilgili de detaylı anlatımlar hazırlarım.

  2. Cevap yaz

    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.

  3. Cevap yaz

    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.

    • Cevap yaz

      Aslında şu an var olan tüm seçiciler listede mevcut, zamanla CSS’e yeni seçiciler gelir ise onları listeye ekleyeceğim. Detaylı anlatımlarda zaman içerisinde teker teker gelip tamamlanacak. Şu an “CSS :nth-child() ve :nth-last-child() Nasıl Kullanılır?” başlıklı rehberi hazırlıyorum.

Bir Cevap Bırakın

Your email address will not be published. Required fields are marked *

You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>