CSS-Klasse ansprechen nur bei anderer CSS-Klasse?
Hallo Zusammen
Wie kann ich die Klasse "amount" ansprechen, aber nur wenn diese in der Klasse "price" ist? Ich möchte nicht alle "amount" CSS-Klassen meiner Seite ansprechen.
<spanclass="price"><spanclass="amount">40.00EUR</span></span>
Besten Dank
7 Antworten
Mir erscheinen die bisherigen Antworten nicht besonders zufriedenstellend (oder ich habe irgendwas übersehen?) daher antworte ich hier auch nochmal:
Generell kannst du, wie bereits von medmonk schon erwähnt, mehrere Klassen direkt auf einem Element zusammenfassen, damit sparst du dir das Verschachteln der span-Elemente: (Mal abgesehen davon dass zwischen "span" und "class" ein Leerzeichen gehört)
<span class="price amount">40.00EUR</span>
Um mittels CSS alle span-Elemente zu selektieren, die sowohl die Klasse price als auch die Klasse amount besitzen, setzt du diese im Selektor einfach direkt hintereinander: (ohne Leerzeichen)
.price.amount { /* Style... */ }
Bzw. mit dem Wrapper drumrum:
.product_details > .price.amount { /* Style... */ }
Alle span-Elemente, die nur einer der beiden Klassen besitzen, wären hiervon ausgeschlossen.
Kleine Demo: https://jsfiddle.net/10gpbz81/
Doch, beachtet habe ichs schon, siehe den zweiten Absatz:
"Generell kannst du, wie bereits von medmonk schon erwähnt, mehrere Klassen direkt auf einem Element zusammenfassen, damit sparst du dir das Verschachteln der span-Elemente"
Wofür nth-child jetzt nötig ist, sehe ich ehrlich gesagt nicht.
Ja, das habe ich wohl gelesen. Deine Snippets sind ja auch richtig. Ich habe deinen Antwort (trotz Zitat) wohl bezüglich des ineinander verschachtelten span missverstanden.
Wofür nth-child jetzt nötig ist, sehe ich ehrlich gesagt nicht.
Ich bin davon ausgegangen, das zwei span-Tags mit gleichen Klassen in einem parent-Element (in meinem Beispiel der Paragraph) stecken, aber nur eines der Spans mit anderen Eigenschaften formatiert werden sollen. Deshalb der Pseudo-Selektor nth-child. Nichts für ungut.
LG medmonk
erstmal schreibst du das span und das class auseinander. Desweiteren ist es keine Klasse sondern ein Klassen-Selektor!
Dein css Code für einen direkten nachfahren lautet:
.price > .amountOder für alle Kinder egal in welcher Tiefe:
.price .amount
Den Important rotz löscht du am besten gleich mal wieder. Important brauchst du fast so gut wie nie. Wenn du es so großflächig einsetzt, ist das immer ein hinweis auf eine schlechte css/html Struktur.
Das zwei Spans ineinander verschachtelt sind, ist dir nicht aufgefallen? ;-) CSS funktioniert zwar, das Markup trotzdem verhunzt (nicht valide) ist.
LG medmonk
Ein Span kann/darf nicht in einem weiteren verschachtelt werden. Wenn ich dir richtig folge, möchtest du lediglich eine weitere Klasse hinzufügen. Dann müsste dein Markup wie folgt aussehen:
<span class="price amount">40.00 EUR<span>
Im CSS kannst du so jedoch so nur die amount-Klasse selektieren. Damit das jeweils gewünschte Span-Tag angesprochen wird, solltest dieses mit Hilfe des Pseudo-Selektors nth-child () ausgewählt werden. Dein Markup könnte dann wie folgt aussehen:
<p>Lorem ipsum dolor ... <span class="price amount">40.00 EUR<span/> mehr Text, ein weiteres Span mit gleichen Klassen. <span class="price amount">80.00 EUR<span/> </p>
In deinem CSS selektierst du jetzt das gewünschte Span mit dem Pseudo-Selektor nth-child(). In diesem Beispiel soll nur das erste Span die Textfarbe rot bekommen. Daher wird in der Klammer das erste Kind-Element mit der Klasse .amount ausgewählt.
p .amount:nth-child(1) {color: red;}
Natürlich kann das Span auch ohne Klasse aufgerufen werden. Hier lediglich das zweite Span selektiert wird und die Textfarbe blau vergeben wird.
p span:nth-child(2) {color: blue;}
Soweit verstanden? Wenn nicht, hier nochmal nachfragen oder einfach mal bei Google nach Pseudo-Selektor suchen. Dort findest du dann haufenweise Beispiele. Aber ich denke das dürfte schon reichen.
LG medmonk
Ein Span kann/darf nicht in einem weiteren verschachtelt werden.
Mich diesbezüglich revidieren muss. Spans dürfen sehr wohl ineinander verschachtelt werden. Bei mir muss sich wohl ein nicht mehr nachvollziehbarer Tippfehler eingeschlichen haben. Die vorgeschlagene Lösung dennoch gültig ist.
LG medmonk
So sollte es funktionieren, wenn NUR die class price angesprochen werden soll, die innerhalb der amount class liegen.
.product-details > .amount > .price { 
.price .amount {}
das habe ich jetzt nicht eben nachgeschlagen, sondern praktiziere das schon seit jahren so. die syntax ist wirklich sehr einfach und effizient.
Dein CSS ist soweit korrekt. Was du jedoch nicht bedacht hast, das im oben gezeigten Snippet zwei Spans ineinander verschachtelt wurden. Semantisch also nicht korrekt (nicht valide). Deshalb wurde auch in meinem Beispiel der Pseudo-Selektor nth-child verwendet.
LG medmonk