Anwenden von CSS auf eine Gruppe von CSS-Klassen mit col-substring

Question

Ich war mir nicht sicher über die beste Möglichkeit, dies zu formulieren, und das ist wahrscheinlich, warum ich mich bemüht habe, es zu recherchieren, obwohl es wahrscheinlich einfach ist.

Was ich tun möchte, ist eine CSS für eine Gruppe von Klassen anwenden.

Zum Beispiel habe ich die Klassen .col-1, .col-2, .col-3, .col-4

Was ich will, einige CSS tun können, ist zu machen, die vielleicht sagen können, die Grenzfarbe mit dem Text für alle Klassen ändern col- so ich muss nicht auf jede einzelne Nummer angewendet werden.

Ich bin sicher, ich habe das schon einmal gesehen, kann aber nicht denken, wie es geht.

Answer 1

Sie könnten [class*="col-"]CSS attribute selector verwenden, um jedes Element auszuwählen, das mindestens ein Vorkommen col- als seinen class Wert enthält.

[class*="col-"] { 
    border-color: red; 
} 

Wenn alle Werte von class Attribute mit col- beginnen, könnten Sie [class^="col-"] Selektor verwenden.

Um jedoch für Klassen wie foo-col-1 zu verhindern, ausgewählt werden, können Sie eine Kombination aus zwei oben Selektoren wie folgt (Dank @JosephSpens):

[class^="col-"], [class*=" col-"] { 
    border-color: red; 
} 

WORKING DEMO.