Öznitelik Değeri seçicileri
Coddy'nin CSS Seçicileri kursunda ders 13 / 15.
Bu derste, öznitelik değeri ile başlayan seçiciler kavramını derinlemesine inceleyeceksiniz. Bu teknik, HTML öğelerini öznitelik değerlerinin başlangıç karakterlerine göre hedeflemenize olanak tanır.
Öznitelik Değeri ile Başlayan Seçici Sözdizimi:
Belirli bir dize ile başlayan öznitelik değerlerine sahip öğeleri hedeflemek için [attribute^="value"] seçici sözdizimini kullanın.
Kod Örnekleri:
HTML:
<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<button class="btn-tertiary">Tertiary Button</button>CSS:
/* "btn-" ile başlayan sınıf öznitelik değerlerine sahip düğmeleri seçer */
[class^="btn-"] {
background-color: lightgray;
}Sağlanan kod örneklerinde:
- Farklı sınıf öznitelik değerlerine sahip üç düğme tanımlanmıştır.
[class^="btn-"]CSS kuralı, "btn-" ile başlayan birclassöznitelik değerine sahip öğeleri hedefler. Bu düğmelerebackground-color: lightgray;stilini uygular.
Sonuç olarak, sınıf öznitelik değerleri "btn-" ile başladığı için her üç düğme de açık gri arka plan rengine sahip olacaktır.
Görev
KolayBir öğe listesi için aşağıdaki HTML yapısına sahip olduğunuzu hayal edin. Amacınız, "fruit-" ile başlayan belirli bir data-category öznitelik değerine sahip liste öğelerini stillendirmektir. CSS kullanarak bu liste öğelerine benzersiz bir arka plan rengi uygulayın.
Kendin dene
<!DOCTYPE html>
<html>
<head>
<title>Attribute Value Starting With Selector</title>
<style>
/* Your CSS code here */
</style>
</head>
<body>
<ul>
<li data-category="fruit-apple">Apple</li>
<li data-category="vegetable-carrot">Carrot</li>
<li data-category="fruit-banana">Banana</li>
<li data-category="fruit-orange">Orange</li>
<li data-category="grain-rice">Rice</li>
</ul>
</body>
</html>
CSS Seçicileri bölümündeki tüm dersler
4Öznitelik seçiciler
Öznitelik Seçicilere GirişVarlık ve Tam DeğerlerÖznitelik Değeri seçicileriÖznitelik Değeri seçicileri IIÖznitelik Değeri seçicileri III