CSS Seçiciler (Selectors) Rehberi: Temel, Nitelik ve Bileşik Seçiciler

Hedefleme ve Hakimiyet Mekanizması

Web tasarımında HTML, sayfanın iskeletini ve anlamsal yapısını oluştururken; CSS, o iskelete giydirilen deri , kıyafet ve makyajdır.

Ancak bu iki farklı dilin birbirini anlaması ve etkileşime girmesi için ortak bir iletişim protokolüne ihtiyaçları vardır.

İşte CSS Seçiciler, bu iletişimi sağlayan, stil kurallarının adresleme sistemidir.

CSS yazmak, teknik olarak tarayıcıya bir dizi görsel emir vermektir: "Kırmızı yap", "Ortala", "Gölge ekle".

Ancak bu emirlerin anlamlı olabilmesi için, emrin kime verildiğinin net olması gerekir.

Seçiciler, yazdığınız stil bloğunun (color: red;) belgedeki yüzlerce öğe arasından hangilerini etkileyeceğini belirleyen filtreleme kalıplarıdır.

Bu mekanizma olmadan, yazdığınız en gelişmiş görsel stiller bile boşlukta asılı kalır.

Seçiciler, tasarımcıya sayfa üzerinde cerrahi bir hassasiyet kazandırır; basit bir etiketi hedeflemekten,

"bir listenin içindeki üçüncü elemanın üzerine gelindiğinde" gibi karmaşık hiyerarşik durumları tanımlamaya kadar geniş bir kontrol alanı sunar.

Mantıksal Katman Seçiciler, CSS'in sadece görsel değil, aynı zamanda mantıksal tarafıdır.

Bir web sayfasının ne kadar sürdürülebilir, yönetilebilir ve performanslı olacağı; seçicilerin ne kadar doğru kurgulandığına bağlıdır.

Doğru seçici kullanımı, kod tekrarını önler, tarayıcının sayfayı daha hızlı boyamasını sağlar ve tasarımın farklı ekran boyutlarında tutarlı davranmasının temelini atar.

Belge Yapısı ile İlişki

Seçiciler yalnızca tek bir elementi hedeflemekle kalmaz; aynı zamanda belgenin hiyerarşik yapısını da kullanır.

Bir web sayfası tarayıcı tarafından yalnızca düz metin olarak değil, ağaç benzeri bir yapı olarak yorumlanır.

Bu yapı, elementlerin birbirleriyle olan ebeveyn, çocuk ve kardeş ilişkilerini tanımlar.

CSS seçicileri bu ilişkileri kullanarak yalnızca belirli elementleri değil, belirli bir bağlam içindeki elementleri hedefleyebilir.

Bu sayede tasarımcılar, yalnızca bir etiketi değil, o etiketin sayfa içindeki konumunu da dikkate alan son derece hassas stil kuralları yazabilirler.

Giriş - Genel Bakış

CSS'te seçiciler yalnızca sözdizimsel araçlar değildir; aynı zamanda bir stil mimarisinin yapı taşlarıdır.

Modern web geliştirmede farklı seçiciler farklı roller üstlenir. Etiket seçiciler genellikle temel tipografiyi oluştururken, sınıf seçiciler arayüz bileşenlerini yönetmek için kullanılır.

ID seçiciler ise çoğunlukla JavaScript etkileşimleri veya sayfa içi bağlantılar için tercih edilir.

Bir web sayfasını boyamaya başlamadan önce, fırçayı nereye vuracağınızı bilmeniz gerekir.

Temel Seçiciler, CSS dünyasında bir HTML öğesini hedeflemenin en doğrudan, en saf ve en sık başvurulan yöntemleridir.

Bu seçiciler, karmaşık ilişkilere ( baba-çocuk, kardeşlik vb. ) girmeden; doğrudan öğenin ismine, sınıfına veya kimliğine bakarak çalışır.

Bu grup, web sayfasının stil mimarisinin temelini oluşturur.

Bir geliştiricinin CSS öğrenirken ustalaşması gereken ilk araçlar bunlardır; çünkü CSS'in hangi kuralın baskın geleceğini belirleyen "Öncelik" ( Specificity ) puanlama sistemi, bu üçlü yapı (Etiket, Sınıf, ID) üzerine kuruludur.

Hedeflemenin En Yalın Hali

Temel seçiciler, CSS'te bir öğeyi hedeflemenin en doğrudan yöntemlerini temsil eder.

Bu seçiciler herhangi bir ilişki veya bağlam analizine ihtiyaç duymadan doğrudan elementin kimliğine veya türüne göre çalışır.

Bu nedenle bu grup, bir web sayfasının stil mimarisinin temel yapı taşlarını oluşturur.

Gelişmiş seçicilerin tamamı, aslında bu temel seçicilerin kombinasyonlarından veya genişletilmiş biçimlerinden türetilir.

Bir geliştiricinin CSS öğrenirken ustalaşması gereken ilk araçlar bunlardır; çünkü CSS'in hangi kuralın baskın geleceğini belirleyen Öncelik puanlama sistemi, bu üçlü yapı (Etiket, Sınıf, ID) üzerine kuruludur.

Temel Stil Kontrolü

Tarayıcıya "Şu başlığı kırmızı yap" veya "Bu paragrafı büyüt" gibi doğrudan komutlar verebilmenin en kısa yolu bu seçicilerden geçer.

Bu yüzden temel seçiciler, CSS öğrenme sürecinin yalnızca başlangıç noktası değil; aynı zamanda tüm stil mimarisinin temeli olarak kabul edilir.

Bir projede doğru seçicileri kullanmak, kodun okunabilirliğini artırır, gereksiz tekrarları azaltır ve sayfanın stil yapısının uzun vadede daha kolay yönetilmesini sağlar.

Giriş - Genel Bakış

CSS'teki en kapsamlı, en genel ve istisnasız tek komut olan Evrensel Seçici, klavyedeki yıldız işareti (*) ile temsil edilir.

Bu işaret, tarayıcı dilinde "Her Şey" demektir.

Yalnızca * karakteri kullanılarak tanımlanır.

Tarayıcı bu karakteri gördüğünde, HTML belgesinin kökü olan <html> etiketinden başlar ve ağacın en ucundaki en küçük <span> veya <i> etiketine kadar, sayfada var olan tüm öğeleri seçer.

Hiçbir ayrım yapmaz, türüne veya sınıfına bakmaz; hepsini kapsama alanına alır.

Kritik Kullanım Senaryoları

Evrensel seçici, genellikle sayfanın tamamını etkileyen "global kuralları" tanımlamak için, projenin en başında kullanılır.

CSS Resetleme (Sıfırlama): Her web tarayıcısının ( Chrome, Safari, Firefox ) kendine has varsayılan stil ayarları ( User Agent Stylesheet ) vardır.

Örneğin: Bir tarayıcı sayfa kenarlarına 8 piksel boşluk bırakırken, diğeri 10 piksel bırakabilir.

Tasarımcının bu tutarsızlıkla savaşmaması için, evrensel seçici ile tüm öğelerin iç ve dış boşlukları sıfırlanır

(margin: 0; padding: 0;).

Bu, tüm tarayıcılarda temiz ve eşit bir "başlangıç tuvali" sağlar.

Box-Sizing (Kutu Modeli) Düzeltmesi: Modern web geliştirmenin en hayati kuralı buradadır.

Varsayılan HTML kutu modelinde, bir kutuya padding veya border eklediğinizde, kutunun genişliği şişer ve hesaplamayı bozar.

Evrensel seçici kullanılarak tüm öğelere box-sizing: border-box; kuralı atanır.

Bu sayede, padding ve border değerleri kutunun genişliğine dahil edilir, taşmalar engellenir ve matematiksel hesaplama karmaşası tüm proje için tek seferde çözülür.

Performans Notu: Güç ve Maliyet Dengesi

"Büyük güç, büyük sorumluluk getirir" sözü, Evrensel Seçici için teknik bir uyarıdır.

İşlem Yükü: Tarayıcı * işaretini gördüğünde, sayfadaki (potansiyel olarak binlerce) öğenin her birini tek tek kontrol etmek ve stili uygulamak zorundadır.

Bu, özellikle çok büyük ve karmaşık sayfalarda, tarayıcının oluşturma sürecini yavaşlatabilir.

En İyi Uygulama: Bu seçici, sadece yukarıda bahsedilen "Resetleme" ve "Box-Sizing" gibi gerçekten her öğeyi etkilemesi gereken durumlarda kullanılmalıdır.

Örneğin: Tüm yazıların rengini kırmızı yapmak için * { color: red; } kullanmak kötü bir pratiktir; çünkü bu, miras alma yoluyla çözülmesi gereken bir iştir.

Evrensel seçiciyi gereksiz yere kullanmak, "performans açısından maliyetli" bir hatadır.

Teknik Derinlik

Evrensel seçici, CSS seçici hiyerarşisinde özgüllüğü en düşük olan seçicilerden biridir.

Bu durum, aynı öğe üzerinde daha spesifik seçiciler kullanıldığında, bu kuralların evrensel seçicinin üzerine kolayca yazılabileceği anlamına gelir.

Örneğin bir sayfada * ile tanımlanan genel bir stil, daha sonra yazılan bir .class veya #id seçicisi tarafından rahatlıkla geçersiz kılınabilir.

Kapsamlı Kullanım (Scoped Universal Selector): Evrensel seçici her zaman tüm belgeyi etkilemek zorunda değildir.

Bir kapsayıcı seçici ile birlikte kullanıldığında, etkisi yalnızca belirli bir bölümle sınırlanabilir.

Örneğin bir bileşen yapısında, sadece belirli bir alanın içindeki tüm öğeleri hedeflemek için kullanılabilir.

(.card * { box-sizing: border-box; })

Bu yaklaşım, büyük projelerde stil izolasyonu sağlamak için oldukça kullanışlıdır.

Modern Reset Yaklaşımı: Günümüzde birçok geliştirici klasik CSS reset yerine daha kontrollü bir başlangıç stili kullanmayı tercih eder.

Bu yaklaşımda evrensel seçici, sadece gerekli olan özellikleri sıfırlamak için kullanılır ve gereksiz stil müdahalelerinden kaçınılır.

Böylece hem tarayıcı uyumluluğu korunur hem de stil sistemi daha öngörülebilir hale gelir.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evrensel Seçici Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="kutu">
        <h1>Modern Tasarım</h1>
        <p>Evrensel seçici ile tüm tarayıcı farklarını sıfırlıyoruz.</p>
        <button>İncele</button>
    </div>
</body>

</html>

/* CSS Uygulaması */

/* 1. Tüm elementlerin varsayılan boşluklarını sıfırla */
/* 2. Kutu modelini border-box yaparak taşmaları engelle */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Sayfa geneli için temel bir font ailesi belirleyelim */
body {
  font-family: sans-serif;
  padding: 20px;
  line-height: 1.6;
}

.kutu {
  background-color: #f4f4f4;
  padding: 20px;
  border: 2px solid #333;
}

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Seçici Öncelik Demo</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <h1 id="title" class="heading highlight">Başlık Metni</h1>

  <p class="text">
    Bu bir paragraf.
  </p>

  <p id="specialText" class="text highlight">
    Bu paragraf birden fazla seçiciye sahip.
  </p>

  <div class="card highlight">
    Kart bileşeni
  </div>

</body>

</html>

/* Global reset + modern görünüm */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #1e1e2f, #2a2a40);
  color: #e4e4e7;
  padding: 40px;
}

body > * {
  max-width: 700px;
  margin: 0 auto 20px auto;
}

.heading {
  font-size: 32px;
  padding: 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(6px);
  text-align: center;
  transition: 0.3s;
}

#title {
  color: crimson;
  box-shadow: 0 0 15px rgba(220, 20, 60, 0.4);
}

p {
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  transition: 0.3s;
}

.text {
  color: #4ade80;
}

#specialText {
  color: #f87171;
  font-weight: bold;
  border: 1px solid rgba(248, 113, 113, 0.5);
}

p:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.08);
}

.card {
  padding: 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  transition: 0.3s;
}

.card.highlight {
  border: 2px solid #a855f7;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.4);
}

.highlight {
  background: rgba(255, 255, 0, 0.08);
}

.card:hover {
  transform: scale(1.02);
}
                        

Giriş - Genel Bakış

Etiket seçiciler ( Type veya Element Selectors ), CSS'in "geniş fırça darbeleri"dir.

HTML belgesinin yapı taşlarını, yani etiketlerin ( tag ) kendilerini doğrudan ismen çağırarak stilize etme yöntemidir.

Bu seçici türü, öğenin sayfadaki konumuna, kimliğine veya sınıfına bakmaz; sadece "Sen kimsin?" sorusunu sorar.

Eğer cevap "Ben bir paragrafım ( <p>)" ise, stili uygular.

Etiket seçiciler, CSS dilinin en saf ve en temel yapı taşlarıdır.

Sınıf seçicilerin nokta ( . ) veya ID seçicilerin kare ( # ) işareti gibi özel bir öneke ( prefix ) ihtiyaç duyduğu sözdiziminin aksine; etiket seçiciler yalın halleriyle kullanılır.

Doğrudan HTML elementinin "resmi adını" referans alırlar.

Sözdizimi Kuralı: HTML'de etiketi nasıl açıyorsanız (<div>, <h1>, <a>), CSS'te de o ismi, başında veya sonunda hiçbir işaret olmadan aynen yazarsınız. ( body, h1, p, ul, li, span, img )

Mantık: "Sorgusuz Sualsiz" Uygulama

Bu seçicinin çalışma prensibi "tümevarım" değil, "genelleme" üzerine kuruludur.

Siz CSS dosyasında p { color: blue; } komutunu yazdığınızda, tarayıcıya şu emri vermiş olursunuz:

"Sayfadaki tüm DOM ağacını tara".

Etiketi <p> olan her nesneyi bul.

Bu paragrafın sayfanın neresinde olduğu, hangi kutunun içine gizlendiği veya başka hangi sınıflara sahip olduğu umurumda değil; istisnasız hepsini maviye boya."

Bu, seçicinin kapsamının tüm doküman olduğu anlamına gelir.

Bu yüzden etiket seçiciler, nokta atışı stil vermek için değil; sayfa genelindeki standartları

(tüm linklerin altının çizili olması veya tüm listelerin madde işaretinin kaldırılması gibi) belirlemek için kullanılır.

Temel Tipografi: Bir web sitesinin okunabilirliği, tutarlı bir tipografiye bağlıdır.

Tüm paragrafların (p) satır yüksekliğini, tüm başlıkların (h1-h6) font ailesini ve tüm bağlantıların (a) alt çizgi durumunu tek bir yerden yönetmek için kullanılır.

Sayfa Geneli Ayarlar: Genellikle body etiketi hedeflenerek, sayfanın varsayılan arka plan rengi (background-color) ve ana yazı tipi

( font-family ) belirlenir.

Bu, alt öğelere miras (inheritance) yoluyla aktarılan bir temel oluşturur.

Öncelik Durumu: "Ezilebilir" Varsayılanlar

Teknik olarak etiket seçiciler, CSS'in Öncelik (Specificity) puanlama sisteminde en düşük puana ( 0-0-1 ) sahiptir.

Neden Bu Bir Avantaj? Düşük puanlı olmaları, onların bir "zayıflık" değil, stratejik bir "esneklik" aracı olmasını sağlar.

Strateji: Siz tüm paragrafları p seçicisiyle gri yaparsınız.

Daha sonra özel bir uyarı kutusu içindeki paragrafa .uyari sınıfı verip kırmızı yapmak isterseniz, tarayıcı sınıf seçicisinin puanı daha yüksek olduğu için etiket seçicisini ezer ve o paragrafı kırmızı yapar.

Etiket seçiciler, üzerine inşaat yapılacak sağlam bir temeldir; son dekorasyon değildir.

Pratik Kullanım Notu:

Modern projelerde etiket seçiciler genellikle temel stil kuralları oluşturmak için kullanılır.

Bileşenlerin veya özel arayüz parçalarının görsel tasarımını yönetmek için ise çoğu zaman class seçicileri tercih edilir.

Bu yaklaşım, stil kurallarının daha esnek, yeniden kullanılabilir ve uzun vadede bakımı kolay olmasını sağlar.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Evrensel Seçici Giriş Örneği</title>
    <link rel="stylesheet" href="styles.css?v=1.0.150">
</head>

<body>
    <section>
        <h2>Web Yazılım Dünyası</h2>
        <p>Etiket seçiciler, sayfadaki tüm aynı türden öğeleri etkiler.</p>
        <p>Bu paragrafların hepsi aynı fırça darbesiyle boyanır.</p>
        <a href="#">Daha fazla bilgi...</a>
    </section>
</body>

</html>

/* CSS Uygulaması */

/* Sayfadaki tüm h2 etiketlerini koyu mavi yapar */
h2 {
  color: #2c3e50;
  margin-bottom: 10px;
}

/* Sayfadaki tüm paragrafları gri ve okunabilir yapar */
p {
  color: #555;
  font-size: 16px;
}

/* Sayfadaki tüm linklerin alt çizgisini kaldırır */
a {
  text-decoration: none;
  color: #3498db;
}

Giriş - Genel Bakış

Etiket seçicilerin "kaba ve genel" yaklaşımının aksine, Sınıf Seçiciler web geliştiricisine cerrahi bir hassasiyet ve sınırsız bir esneklik sunar.

CSS sözdiziminde bir nokta (.) işareti ile başlayan bu seçiciler (.menu, .uyari-kutusu),HTML belgesindeki class niteliği ile eşleşerek çalışır.

Sınıf seçicilerin modern web tasarımının bel kemiği olmasının temel nedeni, stilleri HTML etiketinin türünden ( div, p, span ) tamamen bağımsız hale getirmesidir.

Yapısal Bağımsızlık ve Yeniden Kullanılabilirlik

Sınıf seçicilerin en büyük gücü, "İsimlendirilmiş Stil Paketleri" oluşturabilmesidir.

Siz .kirmizi-yazi adında bir sınıf oluşturduğunuzda, bu stili sayfadaki bir başlığa ( h1 ), bir paragrafa ( p ) veya bir linke (a ) aynı anda uygulayabilirsiniz.

Tarayıcı, öğenin <h2> mi yoksa <span> mı olduğuna bakmaz; sadece "Kimliğinde bu sınıf var mı?" diye sorar.

Bu, aynı görsel kuralı sayfanın yüzlerce farklı yerinde tekrar tekrar kullanmanızı sağlar ve

"Bir Kere Yaz, Her Yerde Kullan" (DRY) prensibini hayata geçirir.

Çoklu Sınıf Kullanımı: Modüler "Lego" Mantığı

Sınıf seçicilerin bir diğer devrimsel özelliği, bir HTML öğesinin birden fazla sınıfa sahip olabilmesidir

(<button class="btn btn-primary btn-lg">).

Bu özellik, CSS yazımında "Yekpare" bloklar yerine, "Modüler" yapılar kurmayı mümkün kılar.

Kompozisyon: Yukarıdaki örnekte btn sınıfı butonun temel iskeletini ( padding, font ) kurar; btn-primary sınıfı ona mavi rengini verir; btn-lg sınıfı ise boyutunu büyütür.

Tıpkı Lego parçaları gibi, küçük ve bağımsız stil sınıflarını birleştirerek karmaşık ve yönetilebilir bileşenler oluşturmak, modern CSS çerçevelerinin de çalışma temelidir.

Öncelik Gücü:

Class seçiciler, CSS'in Öncelik sisteminde orta seviyede bir güce sahiptir.

Bir sınıf seçicinin öncelik puanı 0-1-0 olarak hesaplanır.

Bu değer, Etiket seçicilerden daha güçlü, ancak ID seçicilerden daha zayıf olduğu anlamına gelir.

Bu denge, class seçicileri modern CSS mimarisinde en güvenli ve en yaygın kullanılan hedefleme aracı haline getirmiştir.

Modern CSS Yaklaşımı:

Günümüzde class seçiciler, yalnızca stil vermek için değil; bileşen tabanlı arayüz mimarileri kurmak için kullanılır.

Birçok modern CSS yaklaşımı (BEM, Utility CSS, Component Architecture) stil kurallarını tamamen class seçiciler üzerine inşa eder.

Bu yöntem, stil kurallarının izole, yeniden kullanılabilir ve ölçeklenebilir olmasını sağlar.

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Gelişmiş Seçiciler</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="container">
    <h2>Başlık</h2>

    <p>Bu doğrudan child paragraf</p>

    <div>
      <p>Bu nested (torun) paragraf</p>
    </div>

    <ul>
      <li>Birinci eleman</li>
      <li>İkinci eleman</li>
      <li>Üçüncü eleman</li>
    </ul>

    <a href="#" target="_blank">Yeni sekmede açılır</a>

    <input type="text" placeholder="Metin gir">
    <input type="password" placeholder="Şifre">

    <button>Hover yap</button>
  </div>

</body>

</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: linear-gradient(135deg, #1a1a2e, #16213e);
  color: #eaeaf0;
  padding: 40px;
}

.container {
  max-width: 700px;
  margin: auto;
  padding: 25px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

h2 {
  margin-bottom: 20px;
  text-align: center;
  color: #60a5fa;
}

.container p {
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
  background: rgba(59, 130, 246, 0.15);
  border-left: 4px solid #3b82f6;
}

.container>p {
  background: rgba(239, 68, 68, 0.15);
  border-left: 4px solid #ef4444;
  font-weight: bold;
}

ul {
  margin: 20px 0;
  padding-left: 20px;
}

li {
  margin-bottom: 6px;
  transition: 0.2s;
}

li:first-child {
  color: #facc15;
  font-weight: bold;
}

a {
  display: inline-block;
  margin-bottom: 15px;
  color: #93c5fd;
  text-decoration: none;
  position: relative;
}

a[target="_blank"] {
  color: #c084fc;
}

a[target="_blank"]::after {
  content: " ↗";
  font-size: 12px;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 8px;
  border: none;
  outline: none;
}

input[type="text"] {
  border: 2px solid #4ade80;
}

input[type="password"] {
  border: 2px solid #f87171;
}

button {
  margin-top: 10px;
  padding: 10px 15px;
  border: none;
  border-radius: 10px;
  background: #3b82f6;
  color: white;
  cursor: pointer;
  transition: 0.25s;
}

button:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.container * {
  transition: all 0.2s ease;
}

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Sınıf Seçicisi Gelişmiş Örnek</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="kart-yapi">
    <h3 class="metin-vurgu">Öne Çıkan Başlık</h3>

    <p>Normal bir metin.</p>

    <p class="metin-vurgu">
      Bu metin, aynı sınıf ile vurgulandı.
    </p>

    <p class="metin-vurgu alt-cizgi">
      Bu metin iki sınıfı birlikte kullanır.
    </p>

    <button class="buton buton-ana">Ana Buton</button>
    <button class="buton buton-ikincil">İkincil Buton</button>

  </div>

</body>
</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #1e1e2f;
  color: #e4e4e7;
  padding: 40px;
}

.kart-yapi {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  background: #2a2a40;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.metin-vurgu {
  color: #f59e0b;
  font-weight: bold;
}

.alt-cizgi {
  text-decoration: underline;
}

.buton {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin-right: 10px;
  transition: 0.2s;
}

.buton-ana {
  background-color: #22c55e;
  color: white;
}

.buton-ikincil {
  background-color: #3b82f6;
  color: white;
}

Giriş - Genel Bakış

CSS'te sınıf seçiciler grupları yönetmek için "çoğulcu" bir yaklaşım sergilerken, ID Seçiciler tam tersine "tekilci" ve mutlak bir yaklaşım sunar.

Bir hash/diyez işareti (#) ile başlayan ( #ana-logo, #iletisim-formu) bu seçiciler, HTML belgesindeki id niteliği ile eşleşir.

HTML standartlarına göre, bir ID değeri sayfa içinde yalnızca bir kez kullanılabilir; bu da ID seçicileri, sayfadaki o eşsiz ve tekil parçayı

(parmak izi gibi) hedeflemek için tasarlanmış en keskin araç yapar.

Kritik Fark: Öncelik Gücü ve "Specificity" Savaşı

ID seçicilerin teknik olarak en ayırt edici özelliği, sınıf seçicilere kıyasla çok daha yüksek bir Öncelik Puanına sahip olmalarıdır.

Tarayıcı, stil çakışmalarını çözerken ID'ye her zaman "Ağır Siklet" muamelesi yapar.

Örneğin: Bir elemente hem bir sınıf (.renk-kirmizi) hem de bir ID ( #ozel-kutu ) atanmışsa ve bu iki kural birbiriyle çelişiyorsa

( biri kırmızı, biri mavi yapıyorsa ), tarayıcı sınıfı tamamen görmezden gelir ve ID'nin dediğini yapar.

Bu güç, ilk bakışta bir avantaj gibi görünse de, büyük projelerde yönetimi zorlaştıran bir "Mimari Tuzak"tır.

ID ile yazılmış bir stili daha sonra başka bir kural ile ezmek isterseniz, normal sınıflar işe yaramaz; ya daha güçlü bir ID kullanmak ya da !important gibi kötü pratiklere başvurmak zorunda kalırsınız.

Bu durum literatürde "Specificity Wars" olarak adlandırılır ve kodun bakımını imkansız hale getirebilir.

Modern Yaklaşım: Stil İçin Değil, Davranış İçin

Bu "aşırı güç" ve esneklik eksikliği nedeniyle, modern CSS metodolojilerinde (BEM, OOCSS gibi) ID seçicilerin stil verme amacıyla kullanılması önerilmez.

Profesyonel geliştiriciler, ID'leri görsel tasarım için değil; JavaScript ile DOM elementlerini yakalamak veya sayfa içi bağlantı noktaları oluşturmak için "davranışsal" ve "yapısal" amaçlarla kullanmayı tercih ederler.

Görsel stiller için her zaman, önceliği daha düşük ve yönetimi daha kolay olan Sınıf (.class) seçiciler standarttır.

Öncelik Değeri:

ID seçiciler, CSS'in Öncelik (Specificity) sisteminde en güçlü seçicilerden biridir.

Bir ID seçicinin öncelik puanı 1-0-0 olarak hesaplanır.

Bu değer, class ve type seçicilerin birleşiminden bile daha güçlü olduğu anlamına gelir.

HTML Tekillik Kuralı:

id niteliği, HTML spesifikasyonuna göre bir belge içinde benzersiz olmalıdır.

Aynı ID değerinin birden fazla elementte kullanılması teknik olarak mümkün olsa da, bu durum geçersiz işaretleme oluşturur.

Böyle bir durumda CSS genellikle ilk eşleşen elementi hedefler, ancak JavaScript davranışları beklenmedik sonuçlar verebilir.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Id Seçicisi Giriş Örneği</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
  <header id="ana-header">
    <div id="logo">KOD-MİMARI</div>
    <nav>
      <ul class="liste">
        <li>Anasayfa</li>
        <li>Eğitimler</li>
        <li>Galeri</li>
        <li>İletişim</li>
      </ul>
    </nav>
  </header>
</body>

</html>

/* CSS Uygulaması */

/* Sayfada tek olan ana başlık alanını sabitliyoruz */
#ana-header {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid #f39c12;
}

/* Tekil logo alanına özel font stili */
#logo {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}

Giriş - Genel Bakış

CSS geliştiriciliğinde "iyi kod" ile "kötü kod" arasındaki farkı belirleyen en temel kriterlerden biri verimliliktir.

Bir projede yüzlerce satır stil kodu yazarken, aynı özellikleri ( yazı rengi veya font ailesi ) tekrar tekrar farklı elementler için tanımlamak, dosya boyutunu şişirir ve yönetimi kabusa çevirir.

Grup Seçiciler, aralarına virgül konularak oluşturulan yapılarıyla, bu tekrara son veren ve yazılım dünyasının altın kuralı olan DRY prensibini CSS'e taşıyan mekanizmadır.

Virgülün Gücü ve Kolektif Stil Yönetimi

Bu yöntemde, hedeflenmek istenen birbirinden tamamen bağımsız seçiciler (bir etiket, bir sınıf ve bir ID yan yana olabilir), aralarına virgül konularak tek bir satırda toplanır.

İşleyiş Mantığı: Tarayıcı bu listeyi gördüğünde virgülü "VE" bağlacı olarak yorumlar: "h1 başlığını bul VE h2 başlığını bul VE .ozel-kutu sınıfını bul; sonra hepsine parantez içindeki aynı kuralları uygula."

Tek Kaynaktan Yönetim: Bu, stil yönetiminde "Tek Doğruluk Kaynağı" oluşturur.

Örneğin: sitenizdeki tüm başlıkların (h1'den h6'ya kadar) ve .lead sınıfına sahip giriş paragraflarının aynı gri tonda (#333) olmasını istiyorsunuz.

Gruplama yapmadan bunu 7 kez ayrı ayrı yazarsanız, yarın rengi değiştirmek istediğinizde 7 farklı satırı düzenlemeniz gerekir.

Gruplama yaptığınızda ise tek bir satırı değiştirmeniz, tüm siteyi güncellemek için yeterlidir.

Bu, kodun okunabilirliğini artırır, dosya boyutunu küçültür ve tarayıcının stilleri işleme ( parse) süresini optimize eder.

Sözdizimi Örneği:

Birden fazla seçiciyi gruplayarak aynı stil kurallarını uygulamak için seçiciler virgül ile ayrılır.

Örneğin aşağıdaki CSS kuralı, h1, h2 ve .lead seçicilerinin tamamına aynı stili uygular:

h1, h2, .lead { color: #333; }

Tarayıcı bu ifadeyi üç ayrı kural olarak yorumlar, ancak geliştirici açısından tek bir stil tanımı yeterli olur.

Öncelik Davranışı:

Grup seçiciler kullanıldığında, her seçici kendi Specificity değerini korur.

Yani h1, .baslik ve #logo gibi farklı seçiciler gruplanmış olsa bile, tarayıcı bunları üç ayrı stil kuralı gibi değerlendirir.

Bu nedenle bir grup içinde yer alan ID seçici, aynı grup içindeki class veya type seçicilerden daha güçlü önceliğe sahip olmaya devam eder.

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grup Seçici Gelişmiş Örnek</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
  <main>
    <h1 id="ana-baslik">Gelişmiş Yazılım Kursu</h1>
    <h2>CSS Seçiciler Modülü</h2>
    <h3 class="alt-baslik">Grup Seçici Pratikleri</h3>

    <p class="ozet-metni">
      Bu metin ve yukarıdaki başlıklar ortak stil sistemini kullanır.
    </p>
  </main>
</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #1e293b;
  color: #e2e8f0;
  padding: 40px;
}

main {
  max-width: 600px;
  margin: auto;
}

h1,
h2,
h3,
.ozet-metni {
  color: #334155;
  font-family: 'Segoe UI', sans-serif;
  margin-top: 0;
  line-height: 1.4;
}

h1,
h2,
.ozet-metni {
  border-left: 5px solid #3b82f6;
  padding-left: 15px;
  margin-bottom: 20px;
}

h1,
h2,
h3 {
  letter-spacing: 0.5px;
}

h1:hover,
h2:hover,
h3:hover {
  color: #60a5fa;
  transition: 0.2s;
}


.alt-baslik {
  color: #f59e0b;
}

#ana-baslik {
  color: #ef4444;
}

Giriş - Genel Bakış

Şimdiye kadar incelediğimiz Temel Seçicileri ( Etiket , Sınıf, , ID ), HTML öğelerinin görünen kimliklerine odaklanıyordu.

Ancak HTML etiketleri, arka planda Nitelik adı verilen ve öğenin teknik işlevini belirleyen ( type="text", href="https://google.com", required, alt="Logo") veri parçacıkları taşır.

Bu veriler, etiketin DNA'sıdır.

Nitelik seçiciler, HTML yapısını görsel amaçlar uğruna ekstra sınıflarla ( class ) kirletmek yerine; öğelerin zaten sahip olduğu bu doğal ve işlevsel özellikleri kullanarak onları hedeflemenizi sağlar.

Bu yöntem, Semantik HTML prensibine sadık kalmanızı kolaylaştırır ve özellikle form elemanları, dosya bağlantıları veya çok dilli siteler üzerinde çalışırken geliştiriciye "akıllı" bir esneklik kazandırır.

İpucu: Nitelik seçiciler, özellikle form elemanları veya linkler gibi tekrar eden elementleri hedeflerken stil kodunuzu temiz ve sürdürülebilir tutmanıza yardımcı olur.

Giriş - Genel Bakış

Bu seçici grubu, CSS'in en katı ve en disiplinli sorgulama yöntemidir.

Tarayıcı, stil kuralını uygulamadan önce bir dedektif gibi davranır: Belirtilen niteliğin o etikette var olup olmadığını ve eğer varsa, değerinin istenen şarta birebir ( harfiyen ) uyup uymadığını kontrol eder.

Bu yöntem, HTML yapısına ekstra sınıflar eklemeden, öğelerin işlevsel kimliklerini kullanarak "cerrahi" müdahaleler yapmanızı sağlar.

Tam Değer Eşleşmesi ([nitelik="değer"])

Bu yapı, matematikteki "Eşittir" (=) mantığıyla çalışır.

Eşleşmenin gerçekleşmesi için nitelik değerinin, tırnak içindeki ifadeyle karakter karakter aynı olması gerekir.

Örnek: input[type="text"]

Senaryo: Bir form düşünün; içinde "Gönder" butonu (submit), "Seçim Kutusu" ( checkbox ) ve "İsim Alanı" ( text ) yan yana duruyor.

HTML açısından bunların hepsi <input> etiketidir.

Eğer genel bir input { ... } stili yazarsanız, butonlarınız da yazı alanlarınızla aynı görünüme bürünür ve tasarım bozulur.

Çözüm: input[type="text"] seçicisiyle tarayıcıya şu emri verirsiniz: "Sadece type niteliği 'text' olan inputları bul."

Böylece butonlara ve kutucuklara dokunmadan, cımbızla çeker gibi sadece metin yazılabilen alanları stillendirirsiniz.

Bu, sınıflara ihtiyaç duymadan yapılan en temiz hedefleme yöntemidir.

Varlık Kontrolü ([nitelik])

Burada niteliğin içinde ne yazdığı (değeri) tamamen önemsizdir; önemli olan o niteliğin etikette tanımlı olup olmadığıdır.

Bu, yazılım dünyasındaki "Boolean" mantığıdır.

Örnek: input[required] veya button[disabled]

Senaryo: Bir formda kullanıcının doldurmak zorunda olduğu alanları görsel olarak diğerlerinden ayırmak istiyorsunuz.

Değeri ne olursa olsun (veya değeri hiç olmasa bile), içinde required niteliği geçen tüm kutuları seçip kenarlıklarını kırmızı yapabilirsiniz.

Benzer şekilde [disabled] niteliğine sahip pasif butonları seçip şeffaflığını düşürebilirsiniz.

Çözüm: Bu yöntem, kullanıcı deneyimini ( UX ) iyileştiren ve HTML'in durumuna ( state ) göre anlık tepki veren dinamik bir stil mekanizması kurar.

İpucu: Attribute seçiciler, form ve link gibi tekrar eden öğeleri hedeflerken, HTML yapısını temiz tutmanıza ve stil kodunuzu daha sürdürülebilir hale getirmenize yardımcı olur.

Not: Çok geniş kapsamlı [*] veya [nitelik*="..."] kullanımı, büyük sayfalarda tarayıcı performansını bir miktar etkileyebilir; bu nedenle mümkün olduğunca spesifik hedefleme tercih edin.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basit Nitelik Seçicisi Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <form class="kayit-formu">
        <input type="text" placeholder="Adınızı yazın">
        <input type="email" placeholder="E-posta adresiniz" required>
        <input type="password" placeholder="Şifreniz">
        <button type="submit" disabled>Gönder (Pasif)</button>
    </form>
</body>

</html>

/* CSS Uygulaması */

/* Sadece metin girişi yapılan inputları hedefle */
input[type="text"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
}

/* Zorunlu (required) olan alana vurgu yap */
input[required] {
    border-left: 5px solid #e74c3c;
}

/* Devre dışı (disabled) bırakılmış butonu görselleştir */
button[disabled] {
    background-color: #bdc3c7;
    color: #7f8c8d;
    cursor: not-allowed;
    padding: 10px 20px;
    border: none;
    width: 100%;
}

Giriş - Genel Bakış

Basit eşleştirme "kesinlik" ararken, Alt Dize Eşleştirme yöntemleri "Desen" arar.

Web dünyasında veriler her zaman sabit değildir; URL'ler dinamiktir, dosya yolları uzundur ve veriler değişkendir.

İşte bu noktada CSS, yazılım dünyasındaki Düzenli İfadeler mantığının basitleştirilmiş bir versiyonunu sunar.

Tarayıcıya "Buna eşit olanı bul" demek yerine; "Şununla başlayan", "Şununla biten" veya "İçinde şu kelime geçen" öğeleri bulmasını söylersiniz.

Bu operatörler, klavyedeki özel karakterlerle (*, ^, $) temsil edilir ve nitelik seçicisine "Nereye Bakmalıyım?" sorusunun cevabını verir.

İçeren Değer (*=): Arama Motoru Mantığı

Yıldız işareti, nitelik değerinin içinde, herhangi bir yerinde belirtilen metin parçasının geçip geçmediğini kontrol eder.

Örnek: a[href*="google"]

Kullanım: href niteliğinin içinde "google" kelimesi geçen tüm linkleri yakalar.

Linkin başında http olması, sonunda .com veya .com.tr olması fark etmez.

"google" kelimesini barındıran her şey hedeflenir.

Başlayan Değer (^=): Güvenlik ve Kaynak Kontrolü

Şapka işareti, nitelik değerinin belirtilen metin ile başlamasını şart koşar.

Örnek: a[href^="https"] veya a[href^="mailto:"]

Kullanım: İlk örnek, sadece güvenli ( SSL ) bağlantıları seçer ve onlara yeşil bir kilit ikonu ekleyebilir.

İkinci örnek ise, tıklandığında mail uygulamasını açan linkleri seçer.

Bu, linkin davranışına göre stil vermenin en garantili yoludur.

Biten Değer ($=): Dosya Türü Tanıma

Dolar işareti, nitelik değerinin belirtilen metin ile bitmesini şart koşar.

Bu, genellikle dosya uzantılarını hedeflemek için kullanılır.

Örnek: a[href$=".pdf"]

Kullanım: Linkin adresi ne kadar uzun olursa olsun, sonu .pdf ile bitiyorsa bu bir dokümandır.

CSS ile bu linkleri yakalayıp, yanlarına otomatik olarak küçük bir PDF ikonu yerleştirebilirsiniz (::after ile).

Bu sayede siteye her yeni PDF eklendiğinde manuel olarak ikon koymanıza gerek kalmaz; sistem bunu otomatik halleder.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Alt Dize (Substring) Eşleştirme Seçicileri Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <div class="dosya-listesi">
        <a href="rapor.pdf">Yıllık Raporu İndir</a>
        <a href="https://example.com">Dış Kaynağa Git</a>
        <a href="mailto:destek@site.com">E-posta Gönder</a>
    </div>
</body>

</html>

/* CSS Uygulaması */

.dosya-listesi a {
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #333;
    text-decoration: none;
    border-left: 3px solid transparent;
}

/* ^= : Değeri 'mailto:' ile başlayanları hedefle */
a[href^="mailto:"] {
    background-color: #ecf0f1;
    color: #2980b9;
}

/* $= : Değeri '.pdf' ile bitenleri hedefle */
a[href$=".pdf"] {
    border-left-color: #e74c3c;
    font-weight: bold;
}

/* *= : İçinde 'google' kelimesi geçenleri hedefle */
a[href*="example"] {
    background-color: #f1c40f;
    border-radius: 4px;
}

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Substring Gelişmiş Örnek</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="panel">

    <h3>Buton Durumları</h3>

    <button class="btn-primary">Kaydet</button>
    <button class="btn-danger">Sil</button>
    <button class="btn-warning">Uyar</button>

    <h3>Dosya Türleri</h3>

    <a href="dokuman.pdf">PDF Dosyası</a>
    <a href="arsiv.zip">ZIP Dosyası</a>
    <a href="resim.png">PNG Görsel</a>

    <h3>Input Türleri</h3>

    <input type="email" placeholder="E-posta">
    <input type="tel" placeholder="Telefon">
    <input type="text" placeholder="Metin">

  </div>

</body>

</html>

body {
  font-family: sans-serif;
  background: #1e293b;
  color: white;
  padding: 30px;
}

.panel {
  max-width: 500px;
  margin: auto;
}

button[class*="btn-"] {
  padding: 10px;
  margin: 5px;
  border: none;
  border-radius: 6px;
  color: white;
  cursor: pointer;
}

button[class*="primary"] {
  background: #3b82f6;
}

button[class*="danger"] {
  background: #ef4444;
}

button[class*="warning"] {
  background: #f59e0b;
}

a[href$=".pdf"] {
  color: #e74c3c;
}

a[href$=".zip"] {
  color: #8e44ad;
}

a[href$=".png"] {
  color: #22c55e;
}

input[type^="e"] {
  border: 2px solid #3b82f6;
}

input[type^="t"] {
  border: 2px solid #22c55e;
}

input {
  display: block;
  margin: 8px 0;
  padding: 8px;
  border-radius: 5px;
  border: none;
}

Giriş - Genel Bakış

Şimdiye kadar öğrendiğimiz seçiciler, öğeleri "Kimin" olduğuna göre hedefliyordu.

Bileşik Seçiciler ise öğeleri "Nerede" olduklarına göre hedefler.

Bu seçiciler, birden fazla temel seçiciyi özel semboller (boşluk, >, +, ~) aracılığıyla birbirine bağlayarak, HTML DOM ağacı içindeki

ebeveyn-çocuk veya kardeşlik ilişkilerini kullanır.

Bu, yalnızca belirli bir etiketi veya sınıfı değil, o etiketin başka bir öğeyle olan ilişkisi bağlamında stilize edilmesini mümkün kılar.

Böylece HTML kodunuzu her öğeye sınıf ekleyerek kirletmek ( Classitis ) yerine; "Şu kutunun içindeki başlıklar" veya

"Resimden sonra gelen paragraf" gibi akıllı kurallar yazabilirsiniz.

İpucu: Bileşik seçicilerle çalışırken, boşluk (descendant) ve > (child) farkını iyi anlamak önemlidir. Bir boşluk, tüm alt öğeleri kapsar; > sadece bir seviye alt öğeyi hedefler.

Örnek: .card h2 seçicisi, tüm h2 etiketlerini .card içinde bulur, seviyeye bakmaz.

Örnek: .card > h2 seçicisi ise sadece .card'ın doğrudan çocukları olan h2 etiketlerini hedefler.

Ek Not: + ve ~ seçicileri, kardeş öğeleri hedefler. + sadece hemen sonraki kardeşi seçer, ~ ise tüm sonraki kardeşleri kapsar.

Bu kombinasyonları kullanarak, stil kodunuzu daha anlamlı ve sürdürülebilir hale getirebilirsiniz. Her öğeye ekstra sınıf eklemek yerine, DOM ilişkilerine dayalı akıllı kurallar yazabilirsiniz.

İşlev: Hiyerarşik Derinlik ve Kapsama

Bu seçici, ilk öğeyi (nav) bir "Ata" (Ancestor), ikinci öğeyi (a) ise onun "Soyundan Gelen" (Descendant) olarak kabul eder.

Tarayıcıya verilen emir şudur: "nav etiketinin sınırları içinde bulduğun tüm a etiketlerini seç."

Burada kritik nokta derinliktir, linkin doğrudan nav'ın içinde olması gerekmez; bir ul listesinin, onun içindeki li maddesinin, hatta onun içindeki bir span'ın içinde bile olsa; kök nav olduğu sürece hedef alınır.

Kapsama alanı en geniş olan ilişki türüdür.

Sözdizimi: CSS sözdizimindeki en sessiz ama en güçlü operatör olan boşluk karakteri (space), bu ilişkiyi tanımlamak için yeterlidir.

Örnek: nav a

Kullanım Amacı: Web sayfasının belirli bölgelerine (örneğin #footer, .sidebar veya .article-content) özgü temalar oluşturmak için kullanılır.

Örneğin: Sitenin genelinde linkler mavi iken, sadece alt bilgi (footer a) kısmındaki linklerin beyaz olmasını sağlamak için idealdir.

Dikkat: Stil Sızması Riski

En yaygın kullanılan seçici olsa da, "çok genel" olması bazen dezavantaja dönüşebilir.

Eğer .kart a derseniz, o kartın içindeki metin linklerini hedeflediğinizi sanarken; yanlışlıkla kartın içindeki bir "Satın Al" butonunu veya ikon linkini de etkileyebilirsiniz.

Buna "Stil Sızması" denir ve kontrolsüz kullanıldığında CSS karmaşasına yol açabilir.

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>İnişli Seçici ( - Boşluk) Giriş Örneği</title>
    <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
    <footer class="site-alt-bilgi">
        <div class="konum-kutusu">
            <p>Bize <a href="#">buradan</a> ulaşın.</p>
        </div>
        <ul>
            <li><a href="#">Hizmet Koşulları</a></li>
        </ul>
    </footer>
</body>

</html>

/* CSS Uygulaması */

/* İnişli Seçici (Space): Ana menü içindeki TÜM li'leri etkiler */
.ana-menu li {
    list-style: none;
    font-family: sans-serif;
    color: #2c3e50;
}

/* Çocuk Seçici (>): SADECE ana menünün doğrudan çocuklarını etkiler.
   Alt menüdeki li'ler (torunlar) bu çerçeveyi almaz. */
.ana-menu>li {
    display: inline-block;
    padding: 15px 25px;
    background: #ffffff;
    border: 1px solid #ddd;
    margin-right: 10px;
    cursor: pointer;
}

.alt-menu {
    margin-top: 10px;
    border-top: 2px solid #3498db;
}

Tanım ve Sözdizimi: Katı Hiyerarşi

İnişli seçicinin kullandığı hoşgörülü boşluk karakterinin aksine, Çocuk Seçici iki öğe arasına büyüktür işareti (>) koyarak katı bir sınır çizer.

Örnek: ul > li

Bu işaret, CSS motoruna şu emri verir: "Aradaki tüm aracıları yoksay ve sadece birinci dereceden bağlantıya bak."

İşlev: Sadece Öz Çocuklar (Direct Descendant)

Bu seçici, soy ağacının derinliklerine inmez. Sadece ilk seçicinin (ul) doğrudan, biyolojik çocuğu olan (li) öğeleri hedefler.

Eğer ebeveyn ile hedef element arasına başka bir etiket (örneğin tasarım amaçlı bir div sarmalayıcı) girerse, bağ kopar ve stil uygulanmaz.

Yani bu kuralda "Torunlara yer yoktur"; stil mirası sadece bir alt basamağa geçer.

Kullanım Stratejisi: Stil Sızmasını Önleme

Bu katılık, özellikle iç içe geçmiş yapılarda hayat kurtarır.

Örneğin: Çok seviyeli bir navigasyon menüsünde; sadece ana menü butonlarını stilize etmek isteyip, açılır menü ( dropdown ) içindeki alt linklerin bu stilden etkilenmemesini sağlamak için kullanılır.

Ayrıca, tarayıcı DOM ağacının tüm derinliklerini taramak zorunda kalmadığı ( sadece bir alt seviyeye baktığı ) için, performans açısından inişli seçiciye göre mikrosaniyelik de olsa daha verimlidir.

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Bileşik Seçiciler Gelişmiş Örnek</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="kart">
    <h2>Kart Başlığı</h2>

    <p>Bu doğrudan child paragraf.</p>

    <div>
      <p>Bu nested (torun) paragraf.</p>
    </div>

    <h3>Alt Başlık</h3>
    <p>Bu başlıktan hemen sonra gelen paragraf.</p>
    <p>Bu diğer kardeş paragraf.</p>

  </div>

</body>

</html>

body {
  font-family: sans-serif;
  background: #1e293b;
  color: white;
  padding: 40px;
}

.kart {
  max-width: 500px;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  background: #334155;
}

.kart p {
  background: rgba(59, 130, 246, 0.2);
  padding: 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.kart>p {
  background: rgba(239, 68, 68, 0.3);
  font-weight: bold;
}

h3+p {
  border-left: 4px solid #22c55e;
  padding-left: 10px;
}

h3~p {
  color: #cbd5f5;
}


h2 {
  margin-bottom: 10px;
  color: #facc15;
}

h3 {
  margin-top: 20px;
  color: #38bdf8;
}

Tanım ve Sözdizimi: Artı İşaretinin Gücü

Aile ağacında aşağıya (çocuklara) inmek yerine, aynı seviyedeki elemanlar arasında yatay bir ilişki kuran bu seçici, iki öğe arasına artı işareti (+) konularak tanımlanır.

Örnek: h2 + p

Bu sözdizimi, tarayıcıya çok spesifik bir konumu işaret eder: "Bir h2 başlığı bul ve sadece onun hemen dibindeki p etiketini etkile."

İşlev: Tekillik ve Yakınlık İlkesi

Bitişik kardeş seçicinin en kritik özelliği, seçimin tekil (singular) olmasıdır.

İlk öğeden (h2) hemen sonra gelen yalnızca ilk kardeş öğe (p) seçilir; ondan sonra gelen diğer paragraflar bu kuralın dışında kalır.

Ayrıca, iki öğenin mutlaka aynı ebeveyne (parent) sahip olması ve HTML kod sırasında aralarına başka hiçbir etiketin (görünmez bir span bile olsa) girmemesi gerekir.

Kullanım Senaryosu: Tipografik Ritim

Tasarımda "akış" sağlamak için hayati önem taşır.

Örneğin: Normal paragrafların üst boşluğu (margin-top) standart olabilir; ancak bir başlıktan hemen sonra gelen paragrafın, başlıkla bütünlük sağlaması için üst boşluğunun kaldırılması veya ilk harfinin büyütülmesi ( Drop Cap ) gerekebilir.

Bu seçici, HTML'e ekstra bir sınıf yazmadan bu "özel komşuluk" durumunu otomatik olarak algılayıp stilize etmenizi sağlar.

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Bitişik Kardeş Seçici Gelişmiş</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <div class="haber-karti">
    <h2>Teknoloji Haberleri</h2>

    <p>Bu paragraf vurgulanır (çünkü hemen sonra gelir).</p>

    <p>Bu paragraf normaldir.</p>

    <span>Araya giren bir element</span>

    <p>Bu paragraf artık seçilmez (zincir kırıldı).</p>
  </div>

</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #1e293b;
  color: #e2e8f0;
  padding: 40px;
}

.haber-karti {
  max-width: 420px;
  margin: auto;
  padding: 20px;
  border-radius: 12px;
  background: #334155;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

h2 {
  margin-bottom: 10px;
  color: #38bdf8;
}

h2+p {
  color: #22c55e;
  font-size: 1.05rem;
  font-weight: bold;
  border-left: 4px solid #22c55e;
  padding-left: 10px;
}

p {
  margin-top: 12px;
  color: #cbd5f5;
}

span {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  color: #94a3b8;
}

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Form Flow</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>

  <form class="form-alan">

    <label>Ad Soyad</label>
    <input type="text" placeholder="Adınızı girin">

    <label>E-posta</label>
    <span>Bu alan zorunludur</span>
    <input type="email" placeholder="E-posta girin">

    <label>Şifre</label>
    <input type="password" placeholder="Şifre">

  </form>

</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #0f172a;
  padding: 40px;
  color: #e2e8f0;
}

.form-alan {
  max-width: 400px;
  margin: auto;
  display: flex;
  flex-direction: column;
}

label {
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: #94a3b8;
}

/* Sadece label'dan HEMEN sonra gelen input */
label + input {
  border: 2px solid #3b82f6;
  padding: 10px;
  border-radius: 8px;
  outline: none;
}

/* Normal input */
input {
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #334155;
  margin-bottom: 10px;
  background: #1e293b;
  color: white;
}

/* Araya giren element */
span {
  font-size: 0.8rem;
  color: #f87171;
  margin-bottom: 5px;
}

Tanım ve Sözdizimi: Geniş Kardeşlik

Kardeşlik bağını sadece "bitişik" olmakla sınırlamayan, daha özgürlükçü bir seçicidir. İki öğe arasına tilde işareti ( ~ ) konularak tanımlanır.

Örnek: h2 ~ p

Bu komut tarayıcıya şunu söyler: "Bir h2 başlığı bul ve ondan sonra gelen, aynı ebeveyne sahip olan tüm p etiketlerini seç."

İşlev: "Tüm Küçük Kardeşler" (All Following Siblings)

Bitişik kardeş seçicinin ( + ) aksine, bu ilişki hemen sonraki öğeyle sınırlı değildir.

Arada başka türden etiketler ( div, img vb. ) olsa bile, hiyerarşik olarak ana öğeden ( h2 ) sonra gelen ve kriteri karşılayan ( p ) tüm kardeşler bu stilden etkilenir.

Kullanım Senaryosu: Toplu Stil Yönetimi

Belirli bir "Kırılma Noktası"ndan sonraki içeriği yönetmek için idealdir.

Örneğin: Bir blog yazısında öne çıkarılmış bir görselden (.featured-img) sonra gelen tüm paragrafların yazı tipini veya rengini değiştirmek için kullanılabilir.

Ayrıca listelerde, ilk öğeyi hariç tutup diğer tüm kardeşlere stil vermek için de sıkça başvurulan bir yöntemdir.

<!DOCTYPE html>
<html lang="tr">

<head>
  <meta charset="UTF-8">
  <title>Genel Kardeş (~) Gelişmiş</title>
  <link rel="stylesheet" href="style.css?v=1.0.150">
</head>

<body>
  <div class="blog-icerik">
    <h1>CSS Seçiciler Rehberi</h1>

    <p>Giriş bölümü metni.</p>

    <div class="kilit-noktasi">
      ⚠ Kritik Nokta: Bundan sonrası önemli
    </div>

    <p>Seçicileri doğru kullanın.</p>
    <span>(Ara not: bu span etkilenmez)</span>
    <p>Kod tekrarından kaçının.</p>
    <p>Performansı gözetin.</p>
  </div>
</body>

</html>

body {
  font-family: 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #e2e8f0;
  padding: 40px;
}

.blog-icerik {
  max-width: 500px;
  margin: auto;
}

h1 {
  margin-bottom: 20px;
  color: #38bdf8;
}

p {
  margin: 12px 0;
  padding: 10px;
  border-radius: 6px;
  background: #1e293b;
  transition: 0.3s;
}

.kilit-noktasi {
  margin: 20px 0;
  padding: 12px;
  border-radius: 8px;
  background: #f59e0b;
  color: #1e293b;
  font-weight: bold;
}

.kilit-noktasi~p {
  background: #1e293b;
  border-left: 4px solid #f59e0b;
  transform: translateX(6px);
  color: #fcd34d;
}

.kilit-noktasi~p:hover {
  transform: translateX(10px);
  background: #334155;
}

span {
  display: block;
  font-size: 0.85rem;
  color: #94a3b8;
  margin: 8px 0;
}