Esiste un selettore CSS per prefisso di classe?

175

Voglio applicare una regola CSS a qualsiasi elemento la cui classe corrisponda al prefisso specificato.

Ad esempio, voglio una regola che verrà applicata ai div con classe che inizia con status-(A e C, ma non B nel seguente frammento):

<div id='A' class='foo-class status-important bar-class'></div>
<div id='B' class='foo-class bar-class'></div>
<div id='C' class='foo-class status-low-priority bar-class'></div>

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

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

Nota: so di poter usare jQuery per emularlo.

css css-selectors

— THX-1138
fonte

373

Non è possibile con CSS2.1, ma è possibile con i selettori di corrispondenza substring dell'attributo CSS3 (che sono supportati in IE7 +):

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

Notare il carattere spazio nel secondo selettore di attributi. Questo raccoglie divelementi il cui classattributo soddisfa una di queste condizioni:

[class^="status-"] - inizia con "status-"
[class*=" status-"]- contiene la sottostringa "status-" che si verifica direttamente dopo un carattere spazio. I nomi delle classi sono separati da spazi bianchi secondo le specifiche HTML , quindi il carattere spazio significativo. Questo controlla tutte le altre classi dopo la prima se vengono specificate più classi e aggiunge un vantaggio nel controllare la prima classe nel caso in cui il valore dell'attributo sia spaziato (ciò può accadere con alcune applicazioni che generano classattributi dinamicamente).

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 attributi come [class*="status-"]corrisponderà al seguente elemento, che potrebbe essere indesiderabile:

<div id='D' class='foo-class foo-status-bar bar-class'></div>

Se puoi assicurarti che uno scenario del genere non accadrà mai , allora sei libero di usare un tale selettore per semplicità. Tuttavia, la combinazione sopra è molto più robusta.

Se hai il controllo del sorgente HTML o dell'applicazione che genera il markup, potrebbe essere più semplice fare del status-prefisso la propria statusclasse invece che Gumbo suggerisce .

— BoltClock
fonte

1

Se per qualsiasi strana ragione hai una classe chiamata status-e non vuoi abbinarla, il selettore diventa ancora più complicato: in div[class^="status-"]:not(.status-), div[class*=" status-"]:not(.status-)più perdi il supporto IE7 / IE8. Per fortuna, se il tuo markup è sano, non dovrai escludere una tale classe.

— BoltClock

Cosa c'è di sbagliato con questo: [class*=" anim-overlay-"] a:hover:after{...}. Le mie lezioni CSS sono anim-overlay-1, anim-overlay-2.....anim-overlay-8

— MB Parvez Rony,

2

@WebDevRon: hai dimenticato la parte ^ =. Se il tuo attributo di classe è garantito per iniziare con anim-overlay- allora probabilmente non hai bisogno della parte * =.

— BoltClock

Grazie. Un'altra cosa, posso usare questo .anim-overlay-*{...}?

— MB Parvez Rony,

2

@Daniel Compton: grazie per la modifica. Con il senno di poi mi sono reso conto di come parole del genere possano essere condiscendenti a qualcuno per il quale qualcosa potrebbe non essere così ovvio. So che alcune persone non apprezzano davvero questo tipo di cambiamento, quindi rispondo principalmente per farti sapere che lo faccio.

— BoltClock

14

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

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

(sembra che sia effettivamente allo stato di 'raccomandazione' per 2.1 e 3)

Ecco uno schema di come * penso che funzioni:

[ ]: è il contenitore per selettori complessi se vuoi ...
class: 'class' è l' attributo che stai osservando in questo caso.
* : modificatore (se presente): in questo caso - "carattere jolly" indica che stai cercando QUALSIASI corrispondenza.
test- : il valore (supponendo che ce ne sia uno) dell'attributo - che contiene la stringa "test-" (che potrebbe essere qualsiasi cosa)

Quindi, per esempio:

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

Potresti essere più specifico se hai buone ragioni, anche con l'elemento

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

Ho provato a trovare casi limite, ma non vedo la necessità di utilizzare una combinazione di ^e *- poiché * ottiene tutto ...

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

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

Tutto al di sopra di IE6 obbedirà felicemente. :)

nota che:

[class] { ... }

Selezionerà qualsiasi cosa con una classe ...

— sheriffderek
fonte

[class*='test-']abbinerà elementi come <div class='foo-test-bar'>. Questo è il caso unico che richiede la combinazione di ^ e * come descritto nella mia risposta. E IE6 non supporta i selettori di attributi.

— BoltClock

@BoltClock - grazie per il chiarimento! - Non supporto <EI9 - e non scriverei mai classi che si farebbero un passo a vicenda - quindi per me questo funziona. :)

— sheriffderek

6

Questo non è possibile con i selettori CSS. Ma potresti usare due classi invece di una, ad esempio status e important invece di status-important .

— Gumbo
fonte

14

Buona idea di separarlo nella propria classe, ma è possibile con i selettori CSS. Vedi la mia risposta

— BoltClock

2

Non puoi farlo no. C'è un selettore di attributi che corrisponde esattamente o parzialmente fino a un segno -, ma non funzionerebbe qui perché hai più attributi. Se il nome della classe che stai cercando sarebbe sempre il primo, puoi farlo:

<html>
<head>
<title>Test Page</title>
<style type="text/css">
div[class|=status] { background-color:red; }
</style>
</head>
<body>
<div id='A' class='status-important bar-class'>A</div>
<div id='B' class='bar-class'>B</div>
<div id='C' class='status-low-priority bar-class'>C</div>

</body>
</html>

Nota che questo è solo per indicare quale selettore di attributi CSS è il più vicino, non è consigliabile supporre che i nomi delle classi saranno sempre in primo piano poiché JavaScript potrebbe manipolare l'attributo.

— SBUJOLD
fonte

2

sì, ci ho pensato. Potrebbe diventare un problema quando jQuery entra in scena, dal momento che potrebbe inserire una classe nella parte anteriore.

— THX-1138,

Sì, modificherò il mio post per chiarire che chiaramente non è un modo consigliato di farlo. Se hai il controllo sui nomi delle classi, il suggerimento di Gumbo sarebbe sicuramente la strada da percorrere (più i selettori di attributo sui browser IE precedenti non sono supportati).

— SBUJOLD,