Wie bringt man CSS dazu, eine ID auszuwählen, die mit einer Zeichenfolge beginnt (nicht in Javascript)?

192

Wenn der HTML-Code folgende Elemente enthält:

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

Wie kann ich all diese IDs abgleichen, die mit "Produkt" beginnen?

Ich habe Antworten gesehen, die dies genau mit Javascript tun, aber wie geht das nur mit CSS?

html css css-selectors

— Guptron
quelle

361

[id^=product]

^=zeigt "beginnt mit" an. Umgekehrt $=bedeutet "endet mit".

Die Symbole sind eigentlich aus Regex Syntax entlehnt, wo ^und $mittleren bzw. und „Ende der Zeichenfolge“ „der Zeichenfolge beginnen“.

Ausführliche Informationen finden Sie in den technischen Daten.

— Niet the Dark Absol
quelle

1

Vielen Dank für die Methode und Erklärung. Ich habe meine Frage so bearbeitet, dass sie klarer ist. Gibt es aus Neugier eine Möglichkeit, eine Zeichenfolge innerhalb der Zeichenfolge der ID abzugleichen?

— Guptron

Sehen Sie sich die technischen Daten an , sie erklären es besser als ich!

— Niet the Dark Absol

@itamar: Ich freue mich über Ihren Versuch, meine Antwort zu bearbeiten, aber ein Anführungszeichen ist nur erforderlich, wenn der Wert Zeichen enthält, die keine gültige Kennung sind. productist eindeutig eine gültige Kennung und benötigt daher keine Anführungszeichen.

— Niet the Dark Absol

Die Spezifität dieses Selektortyps ist sehr gering

— Nuander

3

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

— Niet the Dark Absol

59

Ich würde es so machen:

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

Verwenden Sie im Idealfall eine Klasse. Dafür sind Klassen da:

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

Und jetzt wird der Selektor:

.product {
  ...
}

— Mixer
quelle

1

@Blender, danke, ich habe die andere Antwort gewählt, weil sie mir etwas mehr erklärt und die verwendeten Symbole versteht. Ich kann für dieses Szenario keine Klassen verwenden, sonst wäre es schöner.

— Guptron

5

Verwenden Sie die Attributauswahl

[id^=product]{property:value}

— Musa
quelle

-1

Mir ist aufgefallen, dass es einen anderen CSS-Selektor gibt, der dasselbe tut. Die Syntax lautet wie folgt:

[id|="name_id"]

Dadurch werden alle Element-IDs ausgewählt, die mit dem Wort in doppelten Anführungszeichen beginnen.

— Luigi Spezia
quelle

Wie haben Sie es bemerkt? Referenz?

— Ben Bozorg

Doc hierfür hier: w3.org/TR/selectors-3/#attribute-selectors Dies sollte alle IDs auswählen, die mit "name_id" beginnen oder gleich sind

— Dessauges Antoine

att|=valist NICHT das gleiche wie att^=val. Aus der genannten Referenz: Der |=Selektor "Stellt ein Element mit dem Attribut att dar, dessen Wert entweder genau" val "ist oder mit" val " unmittelbar gefolgt von" - "beginnt." Eine ID wie "product42" würde also nicht übereinstimmen |=, aber "Produkt-42" würde.

— Goozak