Bu divleri .tocolor
ile şekillendiriyorum, ancak 1,2,3,4 vb. benzersiz tanımlayıcılara da ihtiyacım var, bu yüzden bunu başka bir sınıf tocolor-1
olarak ekliyorum.
<div class="tocolor tocolor-1"> tocolor 1 </div>
<div class="tocolor tocolor-2"> tocolor 2 </div>
<div class="tocolor tocolor-3"> tocolor 3 </div>
<div class="tocolor tocolor-4"> tocolor 4 </div>
.tocolor{
background: red;
}
Sadece 1 tocolor-*
sınıfına sahip olmanın bir yolu var mı? Bu css'de olduğu gibi bir joker karakter *
kullanmayı denedim, ancak işe yaramadı.
.tocolor-*{
background: red;
}
İhtiyacınız olan şey öznitelik seçici olarak adlandırılır. Html yapınızı kullanarak bir örnek aşağıdaki gibidir:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
divyerine herhangi bir öğe ekleyebilir veya tamamen kaldırabilirsiniz ve
class` yerine belirtilen öğenin herhangi bir niteliğini ekleyebilirsiniz.
[class^="tocolor-"]
- "tocolor-" ile başlar.
[class*=" tocolor-"]
- bir boşluk karakterinden hemen sonra gelen "tocolor-" alt dizesini içerir.
Demo:
CSS öznitelik seçicileri hakkında daha fazla bilgiyi burada ve burada bulabilirsiniz. Ve MDN Docs'dan MDN Docs
Evet, bunu yapabilirsin.
*[id^='term-']{
[css here]
}
Bu, 'term-'
ile başlayan tüm kimlikleri seçecektir.
Bunu yapmamanın nedenine gelince, bu şekilde seçmenin tercih edilebileceği yerleri görüyorum; stil olarak, bunu kendim yapmazdım, ama mümkün.
Div'lerin daha fazla şekillendirilmesi için benzersiz tanımlayıcıya ihtiyacınız yoksa ve HTML5 kullanıyorsanız, özel Veri Niteliklerini deneyebilirsiniz. Okumaya devam edin burada veya HTML5 Özel Veri Nitelikleri
için bir google araması deneyin