CSS Anpassungs Wähler mit benachbarten Klasseneinschränkung

Question

Wenn ich eine bestimmte Klasse my-class-b übereinstimmen soll, die auch eine andere Klasse my-other-class-a auf demselben Element I

.my-class-b.my-other-class-a { 
} 

auch tun kann, wenn ich durch partielle Klassennamen I übereinstimmen soll kann

[class^="my-class-"] { 
} 

Jetzt möchte ich beide mischen, aber es scheint nicht zu funktionieren. Wie kann ich tun

[class^="my-class-"].my-other-class-a { 
} 

Answer 1

Es ist nicht genau kugelsicher, aber solange Ihre „Variable“ Klasse die erste ist, kann diese Arbeit:

div[class^='my-class'][class~='my-other-class-a'] { 
 
    background-color: red; 
 
}

<div class="my-class-a my-other-class-a">Hello</div> 
 
<div class="my-class-b my-other-class-a">World</div> 
 
<div class="my-other-class-a">Bye</div>

Answer 2

Dies geschieht da das Klassenattribut im css-Selektor [class^="abc"] auf den Beginn mit der angegebenen Klasse getestet wird.

Wenn der Selektor

[class^="my-"] 

Dann

class="my-class red" 

ist nicht das gleiche wie

class="red my-class" 

Check it out bei http://jsfiddle.net/u5sfge94/

Ein Weg, um dieses i s, um eine neue Klasse anzugeben, die als [class^= "abc"] fungiert. Es kann Ihr Stylesheet ein wenig organisierter machen, Ihr Code lesbarer und CSS-Rendering etwas schneller.

Answer 3

Erklärung von @juank in einer vorherigen Antwort ist richtig: die Reihenfolge, in der Sie Ihre Klassen schreiben, ist wichtig, weil^für Anfangswert steht.

Aber es gibt viele andere Attributselektoren mit regexp Notation: ^=, *= und $= im Besonderen; bzw. für beginnt mit, irgendwo und endet mit dem Abgleich.
Wenn der Selektor Klassen mit my-class entsprechen soll, verwenden Sie *= (siehe Snippet 1).
Aber dann wird es auch jede Klasse nicht beginnend mit my-class übereinstimmen aber immer noch enthalten. Um dies zu vermeiden, können Sie wie zuvor mit ^= übereinstimmen und auch [class*=" my-class"] (mit einem Leerzeichen) abgleichen: Es wird der Fall berücksichtigt, in dem nicht die erste Klasse in den Wert des Klassenattributs geschrieben ist (siehe Snippet 2).

Ressource:CSS3 Substring Matching Attribute Selectors bei CSS3.info (Link zu REC CSS Ebene 3 Selektoren ganz am Ende)

Schnipsel 1:

[class*='my-class'].my-other-class-a { 
 
    background-color: lightgreen; 
 
}

<div class="my-class-a my-other-class-a">Should match 1</div> 
 
<div class="my-class-b my-other-class-a">Should match 2</div> 
 
<div class="my-other-class-a">Nope</div> 
 
<div class="my-other-class-a my-class-a">Should match 3</div> 
 
<div class="my-other-class-a my-class-b">Should match 4</div> 
 
<div class="whatever my-other-class-a my-class-a">Should match 5</div> 
 
<div class="other my-other-class-a my-class-b">Should match 6</div> 
 
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>

Schnipsel 2:

[class^='my-class'].my-other-class-a, 
 
[class*=' my-class'].my-other-class-a { 
 
    background-color: lightgreen; 
 
}

<div class="my-class-a my-other-class-a">Should match 1</div> 
 
<div class="my-class-b my-other-class-a">Should match 2</div> 
 
<div class="my-other-class-a">Nope</div> 
 
<div class="my-other-class-a my-class-a">Should match 3</div> 
 
<div class="my-other-class-a my-class-b">Should match 4</div> 
 
<div class="whatever my-other-class-a my-class-a">Should match 5</div> 
 
<div class="other my-other-class-a my-class-b">Should match 6</div> 
 
<div class="my-other-class-a maybe-maybe-not-my-class-a">Beware</div>