C’è un selettore CSS per prefisso di class?

Voglio applicare una regola CSS a qualsiasi elemento la cui una delle classi corrisponde al prefisso specificato.

Ad esempio, voglio una regola che si applichi a div che ha una class che inizia con lo status- (A e C, ma non B nello snippet seguente):

 

Una sorta di combinazione di:
div[class|=status] e div[class~=status-]

È fattibile in CSS 2.1? È fattibile con qualsiasi specifica CSS?

Nota: so che posso usare jQuery per emularlo.

Non è fattibile con CSS2.1, ma è ansible con i selettori di sottostringa-matching di attributi CSS3 (che sono supportati in IE7 +):

 div[class^="status-"], div[class*=" status-"] 

Si noti il ​​carattere dello spazio nel secondo selettore di attributo. Raccoglie elementi div cui attributo class soddisfa una di queste condizioni:

  • [class^="status-"] – inizia con “status-” (ovviamente).

  • [class*=" status-"] – contiene la sottostringa “status-” che si verifica direttamente dopo un carattere di spazio. I nomi delle classi sono separati da spazi bianchi secondo le specifiche HTML , quindi il carattere significativo dello spazio. Questo controlla tutte le altre classi dopo il primo se sono specificate più classi e aggiunge un bonus di controllo della prima class nel caso in cui il valore dell’attributo sia spazio (ciò può accadere con alcune applicazioni che generano dynamicmente gli attributi di class ).

Naturalmente, questo funziona anche in jQuery, come dimostrato qui .

Il motivo per cui è necessario combinare due selettori di attributo come descritto sopra è perché un selettore di attributo come [class*="status-"] corrisponderà al seguente elemento, che potrebbe non essere desiderabile:

 

Se è ansible garantire che tale scenario non accadrà mai , allora si è liberi di utilizzare tale selettore per motivi di semplicità. Tuttavia, la combinazione sopra è molto più robusta.

Se hai il controllo sul codice sorgente HTML o sull’applicazione che genera il markup, potrebbe essere più semplice semplicemente status- prefisso dello status come una propria class di status , come invece suggerisce Gumbo .

I selettori degli attributi CSS ti permetteranno di controllare gli attributi per una stringa. (in questo caso – un nome di class)

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

(sembra che sia effettivamente nello stato di ‘raccomandazione’ per 2.1 e 3)

Ecco uno schema di come * penso che funzioni:

  • [ ] : è il contenitore per i selettori complessi se vuoi …
  • class : ‘class’ è l’ attributo che stai guardando in questo caso.
  • * : modificatore (se presente): in questo caso – “carattere jolly” indica che stai cercando QUALSIASI partita.
  • test- : il valore (assumendo che ci sia uno) dell’attributo – che contiene la stringa “test-” (che potrebbe essere qualsiasi cosa)

Quindi, ad esempio:

 [class*='test-'] { color: red; } 

Potresti essere più specifico se hai una buona ragione, anche con l’elemento

ul[class*='test-'] > li { ... }

Ho provato a trovare casi limite, ma non vedo la necessità di usare una combinazione di ^ e * – come * ottiene tutto …

esempio: http://codepen.io/sheriffderek/pen/MaaBwp

http://caniuse.com/#feat=css-sel2

Tutto al di sopra di IE6 obbedirà allegramente. 🙂

nota che:

[class] { ... }

Sceglierà qualsiasi cosa con una class …

Questo non è ansible con i selettori CSS. Ma potresti usare due classi invece di una, ad es. Status e importante invece di status-importante .

Non puoi farlo no. C’è un selettore di attributo che corrisponde esattamente o parziale fino a un segno -, ma non funzionerebbe qui perché hai più attributi. Se il nome della class che stai cercando sarà sempre il primo, potresti fare questo:

   Test Page    
A
B
C

Si noti che questo è solo per indicare quale selettore di attributi CSS è il più vicino, non è consigliabile assumere che i nomi di class saranno sempre in primo piano poiché javascript potrebbe manipolare l’attributo.