Platzhalter * in CSS für Klassen

668

Ich habe diese Divs, mit denen ich style .tocolor, aber ich brauche auch die eindeutige Kennung 1,2,3,4 usw., also füge ich hinzu, dass es sich um eine andere Klasse handelt tocolor-1.

<div class="tocolor tocolor-1">   tocolor 1   </div>
<div class="tocolor tocolor-2">   tocolor 2   </div>
<div class="tocolor tocolor-3">   tocolor 3   </div>
<div class="tocolor tocolor-4">   tocolor 4   </div>

.tocolor{
  background: red;
}

Gibt es eine Möglichkeit , nur 1 Klasse haben tocolor-*. Ich habe versucht, einen Platzhalter *wie in diesem CSS zu verwenden, aber es hat nicht funktioniert.

.tocolor-*{
  background: red;
}

css css-selectors wildcard Twitter
quelle

1

Hier ist die offizielle CSS3-Site über Selektoren: w3.org/TR/css3-selectors Und eine Kompatibilitätsliste: findmebyip.com/litmus

GarfieldKlon

1215

Was Sie brauchen, heißt Attributauswahl. Ein Beispiel für die Verwendung Ihrer HTML-Struktur ist das Folgende:

div[class^="tocolor-"], div[class*=" tocolor-"] {
    color:red 
}

An divIhrer Stelle können Sie ein beliebiges Element hinzufügen oder ganz entfernen, und an classIhrer Stelle können Sie ein beliebiges Attribut des angegebenen Elements hinzufügen.

[class^="tocolor-"]- beginnt mit "tocolor-".
[class*=" tocolor-"]- enthält den Teilstring "tocolor-", der direkt nach einem Leerzeichen steht.

Demo: http://jsfiddle.net/K3693/1/

Weitere Informationen zu CSS-Attributselektoren finden Sie hier und hier . Und von MDN Docs MDN Docs

Sotiris
quelle

2

Coole Infos. Die einzige Einschränkung ist, dass die meisten CSS-Linters Attributselektoren ablehnen, die Regex ähneln (z. B. '*'), wenn die Leistung ein Problem darstellt. Gibt es mit Ausnahme der Verwendung eines Präprozessors (z. B. Sass) eine andere Möglichkeit, dies zu tun?

CodeFinity

2

Gibt es eine Möglichkeit zu überprüfen, ob das Klassenattribut mehrere Teilzeichenfolgen enthält? Vielleicht so etwas div[class*="foo"][class="bar"]?

Connor

Dieser Raum in unserem Beispiel "enthält" ist ziemlich mörderisch. Soweit ich sehen kann, sollte es nicht da sein, richtig?

Thomas

1

@ Thomas Das ist erforderlich, um class="foo tocolor-red"Übereinstimmungen zu gewährleisten , aber nichtclass="foo fromtocolor-red-blue"

Aleclarson

Danke dafür. Ich benutze diese Technik seit einigen Jahren, habe aber nie bemerkt, dass die Klasse ^ = nur für den Anfang des HTML-Klasseneintrags gilt. Ich dachte, es gilt für alle Klassennamen, die für das HTML-Tag definiert sind.

BevansDesign

108

Ja das kannst du.

*[id^='term-']{
    [css here]
}

Dadurch werden alle IDs ausgewählt, die mit beginnen 'term-'.

Was den Grund betrifft, warum ich dies nicht tue, sehe ich, wo es vorzuziehen wäre, diesen Weg zu wählen; Was den Stil betrifft, würde ich es nicht selbst tun, aber es ist möglich.

thomas.han
quelle

Vielen Dank für diesen IDNachtrag, nicht nur für class.

Khom Nazid

26

Eine alternative Lösung:

div[class|='tocolor'] stimmt mit Werten des Attributs "class" überein, die mit "tocolor-" beginnen, einschließlich "tocolor-1", "tocolor-2" usw.

Beachten Sie, dass dies nicht übereinstimmt

<div class="foo tocolor-">

Referenz: https://www.w3.org/TR/css3-selectors/#attribute-representation

[att|=val]

Stellt ein Element mit dem Attribut att dar, dessen Wert entweder genau "val" ist oder mit "val" beginnt, unmittelbar gefolgt von "-" (U + 002D).

adroitec
quelle

12

Dies funktioniert nicht, wenn das classAttribut mit einer anderen Klasse beginnt, die nicht mit beginnt tocolor.

BoltClock

1

Dies funktioniert auch hervorragend in Qts Widget-StyleSheets. Um zum Beispiel einen Stil auf alle Etiketten anzuwenden genannt foo*, würden Sie tunQLabel[objectName|='foo'] { ... }

wieder einzusetzen Monica

Wie @BoltClock sagte, bricht diese Lösung, wenn das Element mehrere Klassen hat und sie nicht mit der Klasse beginnen, nach der OP sucht.

Dan Dascalescu

Funktioniert nicht in Chrome 78, * und ^ funktionieren jedoch.

Gordon Mohrin

3

Wenn Sie die eindeutige Kennung für die weitere Gestaltung der Divs nicht benötigen und HTML5 verwenden, können Sie versuchen, benutzerdefinierte Datenattribute zu verwenden. Lesen Sie hier weiter oder versuchen Sie eine Google-Suche nachHTML5 Custom Data Attributes

DKSan
quelle

Platzhalter * in CSS für Klassen

Antworten: