Suche nach allen Elementen, deren Klassenname mit einer bestimmten Zeichenfolge beginnt

Question

Ist es möglich, einen "Platzhalter" für Elemente zu verwenden, deren Klassenname mit einer bestimmten Zeichenfolge in CSS3 beginnt?

Beispiel:

<div class="myclass-one"></div>
<div class="myclass-two"></div>
<div class="myclass-three"></div>

und setzen dann auf magische Weise alle oben genannten div s in einem Zug auf Rot umstellen:

.myclass* { color: #f00; }

Answer 1

Das Folgende sollte genügen:

div[class^='myclass'], div[class*=' myclass']{
    color: #F00;
}

---

Bearbeiten: Platzhalter hinzugefügt ( * ), wie von David vorgeschlagen

Answer 2

Es ist keine direkte Antwort auf die Frage, aber ich würde in den meisten Fällen vorschlagen, einfach mehrere Klassen für jedes Element festzulegen:

<div class="myclass one"></div>
<div class="myclass two"></div>
<div class="myclass three"></div>

Auf diese Weise können Sie Regeln für alle myclass Elemente und dann spezifischere Regeln für one , two y three .

.myclass { color: #f00; }

.two { font-weight: bold; }

etc.

Answer 3

Sie können problemlos mehrere Klassen zu divs hinzufügen... So:

<div class="myclass myclass-one"></div>
<div class="myclass myclass-two"></div>
<div class="myclass myclass-three"></div>

Dann rufen Sie im CSS die Aktienklasse auf, um die gleichen Stile anzuwenden:

.myclass {...}

Und Sie können Ihre anderen Klassen weiterhin so verwenden:

.myclass-three {...}

Oder wenn Sie im CSS genauer sein wollen, etwa so:

.myclass.myclass-three {...}