Yükleniyor...
CSS Seçiciler Tam Referansı
Bu kapsamlı CSS seçiciler rehberi, geliştiricilerin tüm CSS seçicilerini doğru ve hızlı bir şekilde kullanabilmeleri için tasarlanmıştır. Rehber, temel, kombinatör, nitelik, yapısal ve kullanıcı etkileşimli pseudo-sınıflar, form durumları, bağlantı durumları, mantıksal ve ileri seviye seçiciler ile pseudo-elementler ve medya sorguları gibi tüm kategorileri kapsar. Geliştiriciler bu referansı stil dosyalarını optimize etmek, hatasız CSS yazmak ve modern, duyarlı kullanıcı arayüzleri oluşturmak için etkin bir şekilde kullanabilir. Her kategori, gerçek dünya örnekleri ve tarayıcı desteği ile birlikte sunularak, hızlı başvuru ve kod yazımı için ideal bir kaynak oluşturur.
📊 Basic Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| * | * | Tüm elemanları seçen evrensel seçici | * { margin: 0; } | Tüm tarayıcılar |
| element | tagname | Belirli türdeki tüm elemanları seçer | p { color: blue; } | Tüm tarayıcılar |
| .class | .classname | Belirli sınıfa sahip elemanları seçer | .highlight { background: yellow; } | Tüm tarayıcılar |
| \#id | #idname | Belirli ID'ye sahip elemanı seçer | #header { width: 100%; } | Tüm tarayıcılar |
📊 Combinator Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| descendant | A B | B öğesini A içindeyse seçer | div p { margin: 10px; } | Tüm tarayıcılar |
| child | A > B | B öğesini doğrudan A'nın çocuğuysa seçer | ul > li { list-style: none; } | IE7+ |
| adjacent sibling | A + B | B öğesi A'nın hemen ardından geliyorsa seçer | h1 + p { font-weight: bold; } | IE7+ |
| general sibling | A \~ B | B öğesi A'dan sonra gelen tüm kardeşler | h1 \~ p { color: gray; } | IE7+ |
📊 Attribute Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| \[attribute] | \[attr] | Belirtilen özniteliğe sahip elemanları seçer | \[disabled] { opacity: 0.5; } | IE7+ |
| \[attribute=value] | \[attr=val] | Özniteliğin değerine eşit olan elemanları seçer | \[type="text"] { border: 1px solid; } | IE7+ |
| \[attribute\~=value] | \[attr\~=val] | Özniteliği belirtilen kelimeyi içeriyorsa seçer | \[class\~="button"] { cursor: pointer; } | IE7+ |
| \[attribute^=value] | \[attr^=val] | Özniteliği belirtilen değerle başlıyorsa seçer | \[href^="https"] { color: green; } | IE7+ |
| \[attribute\$=value] | \[attr\$=val] | Özniteliği belirtilen değerle bitiyorsa seçer | \[src\$=".jpg"] { border: 2px solid; } | IE7+ |
| \[attribute*=value] | \[attr*=val] | Özniteliği belirtilen değeri herhangi bir yerde içeriyorsa seçer | \[title*="important"] { font-weight: bold; } | IE7+ |
| \[attribute="value" i] | \[attr="val" i] | Büyük/küçük harf duyarsız eşleşme | \[type="EMAIL" i] { text-transform: lowercase; } | Modern tarayıcılar |
📊 Pseudo-class Selectors - Structural
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :first-child | :first-child | İlk çocuk öğeyi seçer | p:first-child { margin-top: 0; } | IE7+ |
| :last-child | :last-child | Son çocuk öğeyi seçer | p:last-child { margin-bottom: 0; } | IE9+ |
| :nth-child(n) | :nth-child(n) | n'inci çocuk öğeyi seçer | tr:nth-child(2n) { background: #f0f0f0; } | IE9+ |
| :nth-last-child(n) | :nth-last-child(n) | Sondan n'inci çocuğu seçer | li:nth-last-child(2) { color: red; } | IE9+ |
| :nth-of-type(n) | :nth-of-type(n) | Türüne göre n'inci öğeyi seçer | h2:nth-of-type(odd) { color: blue; } | IE9+ |
| :nth-last-of-type(n) | :nth-last-of-type(n) | Türüne göre sondan n'inci öğeyi seçer | p:nth-last-of-type(1) { font-weight: bold; } | IE9+ |
| :first-of-type | :first-of-type | Türüne göre ilk öğeyi seçer | img:first-of-type { float: left; } | IE9+ |
| :last-of-type | :last-of-type | Türüne göre son öğeyi seçer | p:last-of-type { margin-bottom: 20px; } | IE9+ |
| :only-child | :only-child | Tek çocuk öğeyi seçer | p:only-child { text-align: center; } | IE9+ |
| :only-of-type | :only-of-type | Tek tür öğeyi seçer | img:only-of-type { display: block; } | IE9+ |
| :empty | :empty | Hiç çocuğu olmayan öğeyi seçer | div:empty { display: none; } | IE9+ |
📊 Pseudo-class Selectors - User Action
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :hover | :hover | Fare üzerine geldiğinde seçer | a:hover { color: red; } | Tüm tarayıcılar |
| :active | :active | Tıklanıldığında seçer | button:active { transform: scale(0.95); } | Tüm tarayıcılar |
| :focus | :focus | Klavye ile odaklandığında seçer | input:focus { outline: 2px solid blue; } | Tüm tarayıcılar |
| :focus-visible | :focus-visible | Görsel olarak odaklandığında seçer | button:focus-visible { outline: 2px solid; } | Modern tarayıcılar |
| :focus-within | :focus-within | Odaklanan öğeyi içeren öğeyi seçer | form:focus-within { border: 1px solid blue; } | Modern tarayıcılar |
📊 Pseudo-class Selectors - Form States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :enabled | :enabled | Etkin form öğelerini seçer | input:enabled { background: white; } | IE9+ |
| :disabled | :disabled | Devre dışı bırakılmış form öğelerini seçer | input:disabled { background: #f5f5f5; } | IE9+ |
| :checked | :checked | İşaretlenmiş checkbox/radio | input:checked + label { font-weight: bold; } | IE9+ |
| :indeterminate | :indeterminate | Belirsiz checkbox | input:indeterminate { opacity: 0.5; } | IE9+ |
| :valid | :valid | Geçerli form öğelerini seçer | input:valid { border-color: green; } | IE10+ |
| :invalid | :invalid | Geçersiz form öğelerini seçer | input:invalid { border-color: red; } | IE10+ |
| :required | :required | Zorunlu form öğelerini seçer | input:required { border-left: 3px solid red; } | IE10+ |
| :optional | :optional | İsteğe bağlı form öğelerini seçer | input:optional { border-left: 3px solid gray; } | IE10+ |
| :read-only | :read-only | Salt okunur öğeleri seçer | input:read-only { background: #f9f9f9; } | Modern tarayıcılar |
| :read-write | :read-write | Düzenlenebilir öğeleri seçer | input:read-write { background: white; } | Modern tarayıcılar |
| :placeholder-shown | :placeholder-shown | Placeholder gösteren öğeleri seçer | input:placeholder-shown { font-style: italic; } | Modern tarayıcılar |
| :in-range | :in-range | Değeri aralıkta olan öğeleri seçer | input:in-range { border-color: green; } | Modern tarayıcılar |
| :out-of-range | :out-of-range | Değeri aralık dışında olan öğeleri seçer | input:out-of-range { border-color: red; } | Modern tarayıcılar |
📊 Pseudo-class Selectors - Link States
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :link | :link | Ziyaret edilmemiş bağlantıları seçer | a:link { color: blue; } | Tüm tarayıcılar |
| :visited | :visited | Ziyaret edilmiş bağlantıları seçer | a:visited { color: purple; } | Tüm tarayıcılar |
| :any-link | :any-link | Tüm bağlantıları seçer | a:any-link { text-decoration: underline; } | Modern tarayıcılar |
| :target | :target | Mevcut URL hedefi öğeyi seçer | :target { background: yellow; } | IE9+ |
📊 Pseudo-class Selectors - Logical
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :not(selector) | :not(sel) | Seçici ile eşleşmeyen öğeleri seçer | p:not(.special) { color: gray; } | IE9+ |
| :is(selector) | :is(sel1, sel2) | Herhangi bir seçici ile eşleşen öğeleri seçer | :is(h1, h2, h3) { margin-top: 0; } | Modern tarayıcılar |
| :where(selector) | :where(sel1, sel2) | :is ile aynı ama 0 özgüllük | :where(h1, h2) { color: blue; } | Modern tarayıcılar |
| :has(selector) | :has(sel) | Seçici içeren öğeleri seçer | div:has(img) { border: 1px solid; } | Modern tarayıcılar |
📊 Pseudo-element Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| ::before | ::before | Öğe öncesi içerik ekler | p::before { content: "→ "; } | IE9+ (tek iki nokta IE8+) |
| ::after | ::after | Öğe sonrası içerik ekler | p::after { content: " ←"; } | IE9+ (tek iki nokta IE8+) |
| ::first-line | ::first-line | İlk satırı seçer | p::first-line { font-weight: bold; } | IE9+ (tek iki nokta IE6+) |
| ::first-letter | ::first-letter | İlk harfi seçer | p::first-letter | |
| ::selection | ::selection | Seçilen metni seçer | ::selection { background: yellow; } | IE9+ |
| ::placeholder | ::placeholder | Placeholder metnini seçer | input::placeholder { color: #999; } | Modern tarayıcılar |
| ::backdrop | ::backdrop | Tam ekran öğe arka planı | dialog::backdrop { background: rgba(0,0,0,0.5); } | Modern tarayıcılar |
| ::marker | ::marker | Liste işaretçilerini seçer | li::marker { color: red; } | Modern tarayıcılar |
📊 Advanced Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| :root | :root | Belge kökünü seçer | :root { --main-color: blue; } | IE9+ |
| :scope | :scope | Kapsam öğesini seçer | :scope > p { margin: 0; } | Modern tarayıcılar |
| :defined | :defined | Tanımlı özel öğeleri seçer | custom-element:defined { opacity: 1; } | Modern tarayıcılar |
| :host | :host | Shadow host öğesini seçer | :host { display: block; } | Modern tarayıcılar |
| :host(selector) | :host(sel) | Belirli host öğesini seçer | :host(.active) { color: red; } | Modern tarayıcılar |
| :host-context(selector) | :host-context(sel) | Belirli bağlamdaki host öğesini seçer | :host-context(.dark) { color: white; } | Modern tarayıcılar |
| ::slotted(selector) | ::slotted(sel) | Slot içeriğini seçer | ::slotted(p) { margin: 0; } | Modern tarayıcılar |
📊 Media Query Selectors
| Selector | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| @media | @media (condition) | Media koşullarına göre stil uygular | @media (max-width: 768px) { .nav { display: none; } } | IE9+ |
| @supports | @supports (property: value) | Özellik destekliyorsa stil uygular | @supports (display: grid) { .layout { display: grid; } } | Modern tarayıcılar |
| @container | @container (condition) | Kapsayıcı boyutuna göre stil uygular | @container (min-width: 400px) { .card { flex-direction: row; } } | Modern tarayıcılar |
Quick Examples
css
CSS Code
/* Temel seçici kombinasyonu */
.header nav ul li a:hover {
color: #007bff;
text-decoration: none;
}
/* Formlar için öznitelik seçicileri */
input\[type="email"]:focus:valid {
border-color: green;
box-shadow: 0 0 5px rgba(0,255,0,0.3);
}
/* Pseudo-element ile gelişmiş stil */
.quote::before {
content: "“";
font-size: 2em;
color: #999;
}
/* Yapısal gelişmiş seçiciler */
.grid-item:nth-child(3n+1) {
margin-left: 0;
}
/* Modern mantıksal seçiciler */
:is(h1, h2, h3):not(.no-margin) {
margin-top: 2rem;
}En iyi uygulamalar ve ipuçları:
Spesifik seçiciler kullanarak istenmeyen stil çatışmalarını önleyin. Yeniden kullanılabilirlik için ID yerine sınıf seçicilerini tercih edin. CSS dosya boyutunu azaltmak için seçicileri verimli şekilde birleştirin. Farklı tarayıcılarda pseudo-class seçicileri test edin. :not() seçicisini dikkatli kullanın; performansı etkileyebilir. Pseudo-elementler DOM içinde sanal öğeler oluşturur. Karmaşık seçici kombinasyonlarında özgüllüğü göz önünde bulundurun. Dinamik form stilleri için öznitelik seçicilerini kullanın. Yeni seçicileri (:has(), :is()) tarayıcı desteğine göre test edin. İlgili seçicileri gruplandırarak kod organizasyonunu iyileştirin. Descendant seçicilerini dikkatli kullanın, aşırı iç içe geçmeyi önleyin. Bazı pseudo-class’lar yalnızca belirli öğelerde çalışır.
🧠 Bilginizi Test Edin
Başlamaya Hazır
Reference Knowledge Check
CSS seçicileri ve kullanımlarını test edin.
3
Sorular
70%
Geçmek İçin
∞
Süre
∞
Deneme
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek