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 | .intro | Tüm class=”intro” elementlerini seçer. | 1 | Yakında Eklenecek |
| #id | #firstname | Tüm id=”firstname” elementlerini seçer. | 1 | Yakında Eklenecek |
| * | * | Tüm Nesneleri Seçer. | 2 | Yakında Eklenecek |
| element | p | Tüm p elementlerini seçer. | 1 | Yakında Eklenecek |
| element, element | div, p | Tüm div elementleri ile birlikte p elementlerini de seçer. | 1 | Yakında Eklenecek |
| element element | div p | div elementi içerisindeki tüm p elementlerini seçer. | 1 | Yakında Eklenecek |
| element > element | div > p | Ebeveyni sadece div olan p elementlerini seçer. | 2 | Yakında Eklenecek |
| element + element | div + p | div elementin hemen sonra gelen ilk p elementini seçer. | 2 | Yakında Eklenecek |
| element ~ element | p ~ ul | p elementinden sonra gelen aynı katmandaki tüm ul elementlerini seçer. | 3 | Yakı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. | 2 | Yakı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. | 2 | Yakı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. | 2 | Yakı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. | 2 | Yakı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. | 3 | Yakı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. | 3 | Yakı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. | 3 | Yakında Eklenecek |
| :active | a:active | Tıklandığında ve basılı tutulduğunda aktif a elemanını seçer. | 1 | Detaylı anlatım |
| ::after | p::after | Tüm p elemanlarının içeriğinin sonuna bir şey ekler. | 2 | Yakında Eklenecek |
| ::before | p::before | Tüm p elemanlarının içeriğinin başına bir şey ekler. | 2 | Yakında Eklenecek |
| :checked | input:checked | İşaretlenmiş/Seçilmiş tüm input elemanlarını seçer. | 3 | Yakında Eklenecek |
| :default | imput:default | Varsayılan input elemanını seçer. | 3 | Yakında Eklenecek |
| :disabled | input:disabled | Engellenmiş tüm input elemanlarını seçer. | 3 | Yakında Eklenecek |
| :empty | p:empty | İçerisinde hiç bir şey olmayan tüm boş p elemanlarını seçer. | 3 | Yakında Eklenecek |
| :enabled | input:enabled | Etkin olan tüm input elemanlarını seçer. | 3 | Yakında Eklenecek |
| :first-child | p:first-child | Ebeveyninin ilk çocuğu olan p elemanını seçer. | 2 | Detaylı anlatım |
| ::first-letter | p::first-letter | Tüm p elemanlarının ilk harfini seçer. | 1 | Yakında Eklenecek |
| ::first-line | p::first-line | Tüm p elemanlarının ilk satırını seçer. | 1 | Yakında Eklenecek |
| :first-of-type | p:first-of-type | Aynı hiyerarşide bulunan ilk p elemanlarının seçer. | 3 | Yakında Eklenecek |
| :focus | input:focus | Odaklanan input elemanını seçer. | 2 | Yakında Eklenecek |
| :hover | a:hover | Üstüne gelinen a elemanını seçer. | 1 | Yakında Eklenecek |
| :in-range | input:in-range | Belirtilen aralıkta bir değere sahip ise input elemanını seçilir. | 3 | Yakında Eklenecek |
| :indeterminate | input:indeterminate | Belirsiz bir durumda olan input elemanını seçer. | 3 | Yakında Eklenecek |
| :invalid | input:invalid | Belirtilen değere sahip değil ise input elemanını seçilir. | 3 | Yakında Eklenecek |
| :lang(language) | p:lang(tr) | p elemanına atanan lang değeri tr ise seçer. | 2 | Yakında Eklenecek |
| :last-child | p:last-child | Ebeveyninin son çocuğu olan p elemanını seçer. | 3 | Detaylı Anlatım |
| :last-of-type | p:last-of-type | Aynı hiyerarşide bulunan son p elemanlarının seçer. | 3 | Yakında Eklenecek |
| :link | a:link | Ziyaret edilmemiş tüm a elemanlarını seçer. | 1 | Yakında Eklenecek |
| :not(selector) | :not(p) | p elemanı olmayan tüm elemanları seçer. | 3 | Yakında Eklenecek |
| :nth-child(n) | p:nth-child(2) | p elemanının 2.sini seçer. | 3 | Detaylı anlatım |
| :nth-last-child(n) | p:nth-last-child(2) | p elemanının sondan 2.sini seçer. | 3 | Detaylı anlatım |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Aynı hiyerarşide bulunan sondan 2. p elemanını seçer. | 3 | Yakında Eklenecek |
| :nth-of-type(n) | p:nth-of-type(2) | Aynı hiyerarşide bulunan 2. p elemanını seçer. | 3 | Yakında Eklenecek |
| :only-of-type | p:only-of-type | Aynı hiyerarşide tek olan p elementini seçer. | 3 | Yakında Eklenecek |
| :only-child | p:only-child | Ebeveyni tek olan p elementini seçer. | 3 | Yakında Eklenecek |
| :optional | input:optional | Zorununlu olmayan (required niteliği almamış) input elemanlarını seçer. | 3 | Yakında Eklenecek |
| :out-of-range | input:out-of-range | Belirtilen aralıkta bir değere sahip değil ise input elemanını seçilir. | 3 | Yakında Eklenecek |
| ::placeholder | input::placeholder | Yer tutucu metni içeren input elemanlarını seçer. | 3 | Yakında Eklenecek |
| :read-only | input:read-only | readonly niteliği taşıyan input elemanlarını seçer. (mozilla için :-moz-read-only gerekir) | 3 | Yakında Eklenecek |
| :read-write | input:read-write | readonly niteliği taşımayan input elemanlarını seçer. (mozilla için :-moz-read-write gerekir) | 3 | Yakında Eklenecek |
| :required | input:required | Zorununlu olan (required niteliği almamış) input elemanlarını seçer. | 3 | Yakında Eklenecek |
| :root | :root | Belgenin kök elemanı olan tagını seçer. | 3 | Yakında Eklenecek |
| ::selection | ::selection | Kullanıcı tarafından fare ile seçilen yazıyı seçer. | 3 | Yakında Eklenecek |
| :target | #news:target | news adını içeren bir URL’ye tıklandığında geçerli #news elementi seçilir. | 3 | Yakında Eklenecek |
| :valid | input:valid | Belirtilen değere sahip ise input elemanını seçilir. | 3 | Yakında Eklenecek |
| :visited | a:visited | Ziyaret edilmiş tüm a elemanlarını seçer. | 1 | Yakında Eklenecek |
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..
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.
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.
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.
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.