Ho questi div che sto stilizzando con .tocolor
, ma ho anche bisogno dell'identificatore unico 1,2,3,4 ecc. quindi lo aggiungo come un'altra classe 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;
}
C'è un modo per avere solo 1 classe tocolor-*
. Ho provato ad usare un carattere jolly *
come in questo css, ma non ha funzionato.
.tocolor-*{
background: red;
}
Quello di cui hai bisogno si chiama selettore di attributi. Un esempio, usando la vostra struttura html, è il seguente:
div[class^="tocolor-"], div[class*=" tocolor-"] {
color:red
}
Al posto di div
puoi aggiungere qualsiasi elemento o rimuoverlo del tutto, e al posto di class
puoi aggiungere qualsiasi attributo dell'elemento specificato.
[class^="tocolor-"]
- inizia con "tocolor-".
[class*="tocolor-"]
- contiene la sottostringa "tocolor-" che si verifica direttamente dopo uno spazio.
Demo:
Ulteriori informazioni sui selettori di attributi CSS, si possono trovare qui e qui. E da MDN Docs MDN Docs
Sì, puoi farlo.
*[id^='term-']{
[css here]
}
Questo selezionerà tutti gli id che iniziano con 'termine-'
.
Per quanto riguarda la ragione per non farlo, capisco dove sarebbe preferibile selezionare in questo modo; per quanto riguarda lo stile, non lo farei io stesso, ma è possibile.
Se non avete bisogno dell'identificatore unico per un ulteriore stile dei div e state usando HTML5, potreste provare ad usare i Data Attributes personalizzati. Continua a leggere qui o prova a fare una ricerca su Google per HTML5 Custom Data Attributes
.