- Konu sahibi
- #1
CSS selector, hangi HTML öğelerine stil uygulanacağını seçen ifadedir. Örneğin
Bir öğeyi etiketine, sınıfına veya kimliğine göre seçebilirsiniz:
Sınıf seçicileri, aynı stilin birden fazla öğede kullanılacağı durumlarda tercih edin.
Seçiciler arasındaki boşluk, ilk seçilen öğenin içindeki eşleşen alt öğeleri ifade eder.
Aynı anda birden fazla seçiciye stil vermek için virgül kullanılır:
İlk kural tüm
Aşağıdaki tablo, hangi durumda hangi seçicinin daha uygun olduğunu gösterir.
Öznitelik seçicileri belirli HTML özelliklerini hedefler. Pseudo-class seçicileri ise öğenin durumunu belirtir. Örneğin
Aşağıdaki iki dosyalı örnekte seçiciler doğrudan görülebilir. HTML dosyasına ilk kodu, CSS dosyasına ikinci kodu koyup HTML içinden CSS dosyasını bağlayın.
Beklenen sonuç, yalnızca
Bir öğeyi birden fazla kural seçerse tarayıcı öncelik hesabı yapar. Aynı stil kökeni, önem derecesi ve kaskat katmanındaki rakip bildirimlerde daha özgül seçici öne geçer; eşit özgüllükte kural sırası etkili olur. Katman veya önem farkını yalnız seçici uzunluğuyla çözemezsiniz.
Bu nedenle sorunu çözmek için hemen
HTML etiketi içeriğin yapısını tanımlar; selector ise CSS içinde hangi HTML öğesinin biçimlendirileceğini belirtir.
Seçicideki etiket, sınıf veya kimlik adı HTML ile birebir aynı olmalıdır. Ayrıca CSS dosyasının sayfaya bağlandığını ve seçicinin hedef öğenin gerçek hiyerarşisine uyduğunu kontrol edin.
.menu a seçicisi, .menu sınıfına sahip bir öğenin içindeki tüm bağlantıları seçer. CSS kuralı, seçiciyle eşleşen öğelere özellik ve değerleri uygular.En temel seçiciler
Bir öğeyi etiketine, sınıfına veya kimliğine göre seçebilirsiniz:
Kod:
/* Etiket seçici: tüm paragraflar */
p {
line-height: 1.6;
}
/* Sınıf seçici: class="uyari" olan öğeler */
.uyari {
color: #8a1f11;
}
/* Kimlik seçici: id="header" olan tek öğe */
#header {
background-color: #f2f2f2;
}Sınıf seçicileri, aynı stilin birden fazla öğede kullanılacağı durumlarda tercih edin.
id seçicisi tekil bir öğeyi hedeflemek için kullanılabilir; ancak tekrar kullanılabilir bileşenlerde sınıf seçicileri genellikle daha esnektir.Birleştirerek daha kesin seçim yapma
Seçiciler arasındaki boşluk, ilk seçilen öğenin içindeki eşleşen alt öğeleri ifade eder.
.kart a, .kart öğesinin içinde bulunan tüm bağlantıları seçer. Doğrudan çocukları seçmek için > işaretini kullanabilirsiniz: .kart > h2 yalnızca kartın doğrudan çocuğu olan başlıkları hedefler.Aynı anda birden fazla seçiciye stil vermek için virgül kullanılır:
Kod:
h1, h2, h3 {
font-family: sans-serif;
}
nav > a {
text-decoration: underline;
}İlk kural tüm
h1, h2 ve h3 öğelerini seçer. İkinci kural ise yalnızca nav öğesinin doğrudan çocuğu olan bağlantıları seçer.Yaygın selector türleri
Aşağıdaki tablo, hangi durumda hangi seçicinin daha uygun olduğunu gösterir.
| Seçici | Örnek | Ne seçer? |
|---|---|---|
| Etiket | button | Tüm button öğelerini |
| Sınıf | .primary | class="primary" olan öğeleri |
| Öznitelik | input[type="email"] | type değeri email olan input öğelerini |
| Pseudo-class | a:hover | Üzerine gelinen bağlantıları |
Öznitelik seçicileri belirli HTML özelliklerini hedefler. Pseudo-class seçicileri ise öğenin durumunu belirtir. Örneğin
input:focus odaklanmış alanı, li:first-child ebeveyninin ilk çocuğu olan liste öğesini seçer. ::before ve ::after gibi pseudo-element ifadeleri ise bir öğenin sanal içeriğini veya belirli bölümünü biçimlendirmek için kullanılır.Çalışan en küçük örnek
Aşağıdaki iki dosyalı örnekte seçiciler doğrudan görülebilir. HTML dosyasına ilk kodu, CSS dosyasına ikinci kodu koyup HTML içinden CSS dosyasını bağlayın.
Kod:
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS seçici örneği</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="mesaj">Bu yazı seçildi.</p>
<p>Bu yazı seçilmedi.</p>
</body>
</html>
Kod:
.mesaj {
color: blue;
font-weight: bold;
}Beklenen sonuç, yalnızca
mesaj sınıfına sahip ilk paragrafın mavi ve kalın görünmesidir. İki paragrafın da biçimi değişiyorsa seçicideki .mesaj ifadesini kontrol edin; CSS dosyası hiç uygulanmıyorsa href yolunu ve dosya adını kontrol edin. Bu örnekte sınıfın HTML içinde bulunması zorunludur; sınıf adı değiştirilirse CSS kuralı artık eşleşmez.Çakışan kurallarda hangi stil uygulanır?
Bir öğeyi birden fazla kural seçerse tarayıcı öncelik hesabı yapar. Aynı stil kökeni, önem derecesi ve kaskat katmanındaki rakip bildirimlerde daha özgül seçici öne geçer; eşit özgüllükte kural sırası etkili olur. Katman veya önem farkını yalnız seçici uzunluğuyla çözemezsiniz.
#panel .baslik, .baslik seçicisinden daha özeldir.Bu nedenle sorunu çözmek için hemen
!important eklemek yerine önce öğenin gerçekten eşleşip eşleşmediğini, seçicinin özgüllüğünü ve kural sırasını kontrol edin. Tarayıcının geliştirici araçlarında öğeyi açarak uygulanan ve üzeri çizilmiş CSS kurallarını görebilirsiniz. Uzun ve kırılgan seçiciler yerine, bileşenin amacını anlatan sınıflar kullanmak sonraki değişiklikleri kolaylaştırır.Kaynaklar
Sık sorulan sorular
CSS selector ile HTML etiketi arasındaki fark nedir?
HTML etiketi içeriğin yapısını tanımlar; selector ise CSS içinde hangi HTML öğesinin biçimlendirileceğini belirtir.
p bir etiket adıdır ve CSS içinde aynı zamanda etiket seçicisi olarak kullanılabilir.Bir selector neden hiçbir öğeyi seçmiyor?
Seçicideki etiket, sınıf veya kimlik adı HTML ile birebir aynı olmalıdır. Ayrıca CSS dosyasının sayfaya bağlandığını ve seçicinin hedef öğenin gerçek hiyerarşisine uyduğunu kontrol edin.
