CSS Öznitelik Seçicileriyle data-* Kullanımı
Öznitelik değerlerine göre öğelere koşullu stiller uygulayın
CSS Öznitelik Seçicileriyle data-* Kullanımı, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
CSS Öznitelik Seçicileri
CSS öznitelik seçicileri, öğeleri özniteliklerinin varlığına ve değerine göre eşleştirir: [data-state], data-state özniteliğine sahip herhangi bir öğeyi eşleştirir; [data-state="active"] ise yalnızca değer "active" olduğunda eşleştirir.
Varlık Seçicisi
[data-tooltip], değeri ne olursa olsun data-tooltip özniteliğine sahip öğeleri eşleştirir. İpucu içeriğini dikkate almadan önce, ipucu verisi eklenmiş tüm öğelere temel ipucu stilleri uygulamak için bunu kullanın.
Tam Eşleşme Seçicisi
[data-theme="dark"], yalnızca data-theme değeri tam olarak "dark" olan öğeleri eşleştirir. Bu, temaya dayalı stillendirmeyi mümkün kılar: JavaScript tarafından html öğesine data-theme="dark" ayarlandığında koyu renk belirteçlerini uygulayın.
Kısmi Eşleşme Seçicileri
[data-icon^="arrow"], "arrow" ile başlayan değerleri eşleştirir. [data-label$="ing"], "ing" ile biten değerleri eşleştirir. [data-tag*="feature"], içinde "feature" geçen değerleri eşleştirir. Bunlar, çok sayıda sınıf eklemeden kalıba dayalı stillendirme yapmanızı sağlar.
data-* ile Durum Makinesi
Bileşen durumunu data-state öznitelikleriyle modelleyin: [data-state="idle"], [data-state="loading"], [data-state="error"]. Her durum için ayrı CSS kuralları, birden çok koşullu sınıf adının yerini alır; durumu tek bir öznitelikte, stilleri ise açıkça ayrılmış biçimde tutar.
[data-state="loading"] .spinner { display: block; }
[data-state="error"] .message { color: var(--color-error); }Öznitelik Seçicilerinin Özgüllüğü
Öznitelik seçicileri, sınıf seçicileriyle aynı özgüllüğe sahiptir (0,1,0). Bunları öğe seçicileriyle birleştirince button[data-variant="primary"] özgüllüğü (0,1,1) olur. Çakışmaları önlemek için öznitelik seçicilerinin özgüllüğünü sınıf tabanlı kurallarla birlikte planlayın.
İpucu Kalıbı
data-tooltip kullanan yalnızca CSS ile oluşturulmuş bir ipucu için fareyle üzerine gelindiğinde ::after { content: attr(data-tooltip) } uygulayın. content: attr() işlevi öznitelik değerini okur ve bunu sözde öğe içeriği olarak kullanır — JavaScript'e veya ek HTML öğelerine gerek yoktur.
[data-tooltip]:hover::after {
content: attr(data-tooltip);
position: absolute;
background: #333;
color: white;
padding: 4px 8px;
border-radius: 4px;
}Stil Vermede data-* ile Sınıf Karşılaştırması
Stil verme amacını belirtmek için sınıfları (is-active, has-error), veri yükünü belirtmek için veri özniteliklerini (data-user-id, data-count) kullanın. Aynı öznitelik hem davranışı (JS onu okur) hem de stillendirmeyi (CSS onu seçer) yönlendirdiğinde data-*, JS ile CSS arasındaki yinelemeyi ortadan kaldırır.
data-* Seçicilerini Birleştirme
Birden çok öznitelik seçicisini zincirleyin: [data-type="button"][data-size="large"], her iki özniteliğin de ayarlandığı öğeleri eşleştirir. Bu, .button-large gibi birleşik bir sınıfa ihtiyaç duymadan bileşik eşleştirme oluşturur ve sınıf çoğalmasını azaltır.
Performans Notu
Stil çözümlemesinde öznitelik seçicileri, sınıf seçicilerinden biraz daha yavaştır. Statik stiller için sınıfları tercih edin. Öznitelik değeri, çalışma zamanında değişen bir stili yönlendirdiğinde — örneğin tek bir öznitelik birden çok açılıp kapanan sınıfın yerini aldığında — öznitelik seçicilerini kullanın.
Büyük-Küçük Harf Duyarlılığı
Varsayılan olarak HTML'de öznitelik değeri eşleştirme büyük-küçük harfe duyarlıdır (ancak XHTML'deki dil kodları için duyarlı değildir). Büyük-küçük harfe duyarsız eşleştirme için i bayrağını ekleyin: [data-state="Active" i], "active", "Active" ve "ACTIVE" değerlerini eşleştirir.
Bilgi Kontrolü
[data-state="loading"] .spinner CSS seçicisi ne yapar?
Özet
CSS öznitelik seçicileri, data-* özniteliklerini varlıklarına, tam değerlerine veya kısmi kalıplarına göre eşleştirir. İpuçları için content: attr() ve bileşen durum makineleri için data-state ile birlikte kullanıldığında data-* öznitelikleri, sınıf çoğalmasına gerek kalmadan hem veri taşıyıcısı hem de CSS stillendirme bağlantısı olarak görev yapar.
Sıkça Sorulan Sorular
“CSS Öznitelik Seçicileriyle data-* Kullanımı” dersi ücretsiz mi?
Evet — “CSS Öznitelik Seçicileriyle data-* Kullanımı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“CSS Öznitelik Seçicileriyle data-* Kullanımı” dersinde ne öğreneceğim?
Öznitelik değerlerine göre öğelere koşullu stiller uygulayın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.
“CSS Öznitelik Seçicileriyle data-* Kullanımı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- data-* Sözdizimi ve Adlandırma Kuralları
- JavaScript'te dataset ile data-* Erişimi
- CSS Öznitelik Seçicileriyle data-* Kullanımı
- Gerçek Dünya Kalıpları: Araç İpuçları ve Durum İzleme