CSS Selector ve XPath: Element Seçim Rehberi

Web geliştirmede DOM (Document Object Model) üzerindeki elemanları seçmek temel bir beceridir. CSS selector'ler stil uygulamak ve JavaScript ile eleman seçmek için, XPath ise özellikle web scraping, test otomasyonu ve XML işleme gibi alanlarda kullanılır. Bu rehberde her iki yöntemi de detaylıca inceliyoruz.

CSS Selector Temelleri

Basit Seçiciler

/* Element seçici */
p { color: #333; }

/* Class seçici */
.card { padding: 16px; }

/* ID seçici */
#header { background: #fff; }

/* Evrensel seçici */
* { box-sizing: border-box; }

/* Grup seçici */
h1, h2, h3 { font-family: 'Outfit', sans-serif; }

Attribute (Öznitelik) Seçiciler

Elemanları HTML özniteliklerine göre seçer:

/* Özniteliği olan */
[href] { color: blue; }

/* Tam eşleşme */
[type="email"] { border-color: green; }

/* İle başlayan */
[href^="https"] { color: green; }

/* İle biten */
[href$=".pdf"] { color: red; }

/* İçeren */
[class*="btn"] { cursor: pointer; }

/* Boşlukla ayrılmış listede içeren */
[class~="active"] { font-weight: bold; }

Pseudo-class Seçiciler

Elemanların belirli durumlarını veya konumlarını hedefler:

/* Durum */
a:hover { text-decoration: underline; }
input:focus { outline: 2px solid #0066ff; }
input:disabled { opacity: 0.5; }
input:checked + label { color: green; }

/* Yapısal */
li:first-child { margin-top: 0; }
li:last-child { margin-bottom: 0; }
tr:nth-child(even) { background: #f5f5f5; }
p:nth-of-type(2) { font-size: 1.2em; }

/* Olumsuzlama */
:not(.hidden) { display: block; }
:not(:last-child) { margin-bottom: 8px; }

Pseudo-element Seçiciler

p::first-line { font-weight: bold; }
p::first-letter { font-size: 2em; }
.tooltip::before { content: "ℹ "; }
.clearfix::after { content: ""; display: table; clear: both; }

Combinator (Birleştirici) Seçiciler

Elemanlar arasındaki ilişkiyi ifade eder:

/* Torun (descendant): boşluk */
article p { line-height: 1.8; }

/* Doğrudan çocuk (child): > */
ul > li { list-style: disc; }

/* Bitişik kardeş (adjacent sibling): + */
h2 + p { margin-top: 0; }

/* Genel kardeş (general sibling): ~ */
h2 ~ p { color: #555; }

CSS Specificity (Özgüllük)

Birden fazla kural aynı elemana uygulandığında, specificity hangi kuralın kazanacağını belirler. Hesaplama mantığı (a, b, c) şeklindedir:

• a: ID seçici sayısı
• b: Class, attribute ve pseudo-class sayısı
• c: Element ve pseudo-element sayısı

p { }                    /* (0,0,1) */
.card { }                /* (0,1,0) */
#header { }              /* (1,0,0) */
p.card { }               /* (0,1,1) */
#header .nav a { }       /* (1,1,1) */
#header .nav a:hover { } /* (1,2,1) */

Daha yüksek specificity değerine sahip kural öncelik kazanır. Eşitlik durumunda son yazılan kural geçerli olur. !important tüm specificity kurallarını geçersiz kılar, ancak bakımı zorlaştırdığı için mümkünse kaçınılmalıdır.

XPath Temelleri

XPath (XML Path Language), XML ve HTML belgelerinde düğüm seçmek için kullanılan bir sorgu dilidir. CSS selector'lerden daha güçlüdür çünkü yukarı yönde gezinme (parent, ancestor) yapabilir.

Temel XPath İfadeleri

// Tüm paragrafları seç
//p

// ID'ye göre seç
//*[@id="header"]

// Class'a göre seç
//*[contains(@class, "card")]

// Belirli metni içeren eleman
//a[text()="Ana Sayfa"]
//p[contains(text(), "merhaba")]

// Attribute'a göre seç
//input[@type="email"]
//a[starts-with(@href, "https")]

// Pozisyona göre seç
//ul/li[1]          // İlk li
//ul/li[last()]     // Son li
//ul/li[position()>2]

XPath Eksenleri (Axes)

// Ebeveyn
//span/parent::div

// Ata (ancestor)
//span/ancestor::form

// Kardeşler
//h2/following-sibling::p
//h2/preceding-sibling::p

// Çocuklar
//div/child::p

CSS Selector vs XPath: Hangisini Kullanmalı?

• CSS Selector tercih edin: Stil tanımlama, JavaScript DOM sorgulama (querySelector), basit seçimler
• XPath tercih edin: Yukarı yönde gezinme gerektiğinde, metin içeriğine göre seçim, karmaşık koşullu sorgular, web scraping
• Performans: CSS selector'ler genellikle tarayıcılarda daha hızlıdır
• Okunabilirlik: CSS selector'ler daha kısa ve sezgiseldir