Come ottenere CSS per selezionare l'ID che inizia con una stringa (non in Javascript)?

194

Se l'HTML ha elementi come questo:

id="product42"
id="product43"
...

Come posso abbinare tutti quegli ID che iniziano con "prodotto"?

Ho visto delle risposte che fanno esattamente questo usando JavaScript, ma come farlo solo con CSS?

html css css-selectors

— guptron
fonte

364

[id^=product]

^=indica "inizia con". Al contrario, $=indica "termina con".

I simboli sono in realtà presi in prestito dalla sintassi Regex, dove ^e $significano rispettivamente "inizio della stringa" e "fine della stringa".

Vedi le specifiche per informazioni complete.

— Niet the Dark Absol
fonte

1

Grazie per il metodo e la spiegazione, ho modificato la mia domanda in modo che sia più chiara. Per curiosità, c'è un modo per abbinare una stringa all'interno della stringa dell'ID?

— guptron,

Vedi le specifiche , lo spiegano meglio di me!

— Niet the Dark Absol,

@itamar: apprezzo il tuo tentativo di modificare la mia risposta, ma il preventivo è richiesto solo se il valore contiene caratteri che non sono un identificatore valido. productè chiaramente un identificatore valido e quindi non necessita di virgolette.

— Niet the Dark Absol,

La specificità di questo tipo di selettore è molto bassa

— nuander,

3

@Emerald214:not([id^=product])

— Niet the Dark Absol

59

Lo farei così:

[id^="product"] {
  ...
}

Idealmente, usa una classe. Ecco a cosa servono le classi:

<div id="product176" class="product"></div>
<div id="product177" class="product"></div>
<div id="product178" class="product"></div>

E ora il selettore diventa:

.product {
  ...
}

— Miscelatore
fonte

1

@Blender, grazie, ho scelto l'altra risposta perché mi spiega un po 'di più e capisco i simboli utilizzati. Non posso usare le classi per questo scenario, altrimenti sì, sarebbe meglio.

— guptron,

5

Usa il selettore di attributi

[id^=product]{property:value}

— Musa
fonte

-1

Ho notato che esiste un altro selettore CSS che fa la stessa cosa. La sintassi è la seguente:

[id|="name_id"]

Questo selezionerà tutti gli elementi ID che iniziano con la parola racchiusa tra virgolette.

— Luigi Spezia
fonte

Come hai notato? riferimento?

— Ben Bozorg,

Doc per questo qui: w3.org/TR/selectors-3/#attribute-selectors Questo dovrebbe selezionare tutti gli id che iniziano o uguali a "name_id"

— Dessauges Antoine

att|=valNON è lo stesso di att^=val. Dal riferimento citato: il |=selettore "Rappresenta un elemento con l'attributo att, il suo valore o è esattamente" val "o inizia con" val " immediatamente seguito da" - " ." Quindi un ID come "product42" non verrebbe abbinato da |=, ma "product-42" sarebbe.

— Goozak,