carattere jolly * in CSS per le classi

670

Ho questi div con cui sto disegnando .tocolor, ma ho anche bisogno dell'identificatore univoco 1,2,3,4 ecc. Quindi lo sto aggiungendo 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 lezione tocolor-*. Ho provato a usare un carattere jolly *come in questo CSS, ma non ha funzionato.

.tocolor-*{
  background: red;
}

css css-selectors wildcard

— cinguettio
fonte

1

Ecco il sito CSS3 ufficiale sui selettori: w3.org/TR/css3-selectors E un elenco di compatibilità

— GarfieldKlon

1216

Quello che ti serve è chiamato selettore di attributi. Un esempio, usando la tua struttura html, è il seguente:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

Al posto di divte puoi aggiungere qualsiasi elemento o rimuoverlo del tutto, e al posto di classte puoi aggiungere qualsiasi attributo dell'elemento specificato.

[class^="tocolor-"]- inizia con "tocolor-".
[class*=" tocolor-"]- contiene la sottostringa "tocolor-" che si verifica direttamente dopo un carattere spazio.

Demo: http://jsfiddle.net/K3693/1/

Maggiori informazioni sui selettori di attributi CSS, puoi trovare qui e qui . E dai documenti MDN Documenti MDN

— Sotiris
fonte

2

Informazioni interessanti. L'unica avvertenza è se le prestazioni sono un problema, la maggior parte dei linter CSS rifiuterà i selettori di attributi che assomigliano a regex (ad es. Usando '*') b / c di prestazioni lente. Con l'eccezione dell'uso di un preprocessore (ad es. Sass), esiste un altro modo per farlo?

— CodeFinity,

2

C'è un modo per verificare se l'attributo class contiene più sottostringhe? Forse qualcosa del genere div[class*="foo"][class="bar"]?

— Connor,

Quello spazio nel nostro esempio "contiene" è piuttosto assassino. Da quello che posso vedere, non dovrebbe essere lì, giusto?

— Thomas,

1

@Thomas Questo è necessario per garantire le class="foo tocolor-red"partite, ma nonclass="foo fromtocolor-red-blue"

— aleclarson,

Grazie per questo. Sto usando questa tecnica da alcuni anni, ma non ho mai capito che class ^ = si applica solo all'inizio della voce di classe HTML. Ho pensato che si applicava a tutti i nomi di classe definiti per il tag HTML.

— BevansDesign

108

Sì, puoi farlo.

*[id^='term-']{
    [css here]
}

Questo selezionerà tutti gli ID che iniziano con 'term-' .

Per quanto riguarda la ragione per non farlo, vedo dove sarebbe preferibile selezionare in questo modo; per quanto riguarda lo stile, non lo farei da solo, ma è possibile.

— thomas.han
fonte

Grazie per questo IDaddendum basato, non solo per class.

— Khom Nazid,

26

Una soluzione alternativa:

div[class|='tocolor'] corrisponderà per i valori dell'attributo "class" che iniziano con "tocolor-", inclusi "tocolor-1", "tocolor-2", ecc.

Fai attenzione che questo non corrisponderà

<div class="foo tocolor-">

Riferimento: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Rappresenta un elemento con l'attributo att, il cui valore è esattamente "val" o inizia con "val" immediatamente seguito da "-" (U + 002D)

— adroitec
fonte

12

Questo non funzionerà se l' classattributo inizia con un'altra classe che non inizia tocolor.

— BoltClock

1

Funziona perfettamente anche con i fogli di stile widget di Qt. Ad esempio, per applicare uno stile a tutte le etichette denominate foo*, farestiQLabel[objectName|='foo'] { ... }

— Ripristina Monica il

Come diceva @BoltClock, questa soluzione si interrompe se l'elemento ha più classi e non iniziano con la classe che OP sta cercando.

— Dan Dascalescu,

Tuttavia, non funziona in Chrome 78, * e ^ funzionano.

— Gordon Mohrin,

3

Se non hai bisogno dell'identificatore univoco per l'ulteriore stile dei div e stai utilizzando HTML5, puoi provare ad andare con attributi di dati personalizzati. Continua a leggere qui o prova una ricerca su Google perHTML5 Custom Data Attributes

— DKSan
fonte