Ik heb deze divs die ik'm styling met .tocolor
, maar ik moet ook de unieke identificatie 1,2,3,4 enz. dus ik'm toe te voegen dat het als een andere klasse tocolor-1
.
<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;
}
Is er een manier om slechts 1 klasse protocolor-*
te hebben. Ik heb geprobeerd een wildcard *
te gebruiken zoals in deze css, maar het werkte niet.
.tocolor-*{
background: red;
}
Wat je nodig hebt heet een attribuut selector. Een voorbeeld, gebruik makend van je html structuur, is het volgende:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
In de plaats van div
kun je elk element toevoegen of helemaal verwijderen, en in de plaats van class
kun je elk attribuut van het gespecificeerde element toevoegen.
[class^="tocolor-"]
- begint met "tocolor-".
[class*=" tocolor-"]
- bevat de substring "tocolor-" die direct na een spatie komt.
Demo:
Meer informatie over CSS attribuut selectors, kun je vinden hier en hier. En van MDN Docs MDN Docs
Ja, dit kan je.
*[id^='term-']{
[css here]
}
Dit zal alle ids selecteren die beginnen met 'term-'
.
Wat betreft de reden om dit niet te doen, ik zie waar het de voorkeur zou hebben om op deze manier te selecteren; wat betreft stijl, ik zou het zelf niet doen, maar het'is mogelijk.
Als je de unieke identifier niet nodig hebt voor verdere styling van de divs en HTML5 gebruikt, zou je kunnen proberen om met aangepaste data attributen te werken. Lees verder hier of probeer op google te zoeken naar HTML5 Custom Data Attributes
.