Frage von kontolukas, 74

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

Antwort
von medmonk, 28

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 

Kommentar von 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 

Antwort
von Sarkophator, 25

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/

Kommentar von medmonk ,

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 

Kommentar von Sarkophator ,

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.

Kommentar von medmonk ,

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 

Antwort
von Harraldino, 51

Hast du eine "Beispielseite"?
So blindlings etwas zu finden ist nicht ganz so einfach ^^

Kommentar von kontolukas ,
.product-details > .amount{

color: #9B9B9B !important;

text-align: center !important;

text-transform: uppercase !important;

font-size: 60px !important;

line-height: 15px !important;

}
Antwort
von eddiepoole, 22

.price .amount {}

das habe ich jetzt nicht eben nachgeschlagen, sondern praktiziere das schon seit jahren so. die syntax ist wirklich sehr einfach und effizient.

Antwort
von heilwigkenner, 44

Der zugehörige CSS-Selector lautet

parent > child {
   ...
}
Kommentar von kontolukas ,
.product-details > .amount{

color: #9B9B9B !important;
text-align: center !important;
text-transform: uppercase !important;
font-size: 60px !important;
line-height: 15px !important;
}

So richtig? Es geht irgendwie nicht

Kommentar von eddiepoole ,

Vielleicht liegts einfach nur an dem fehlenden Leerzeichen zwischen "span" und "class".

<spanclass="price"><spanclass="amount">
Antwort
von Harraldino, 27

So sollte es funktionieren, wenn NUR die class price angesprochen werden soll, die innerhalb der amount class liegen.

.product-details > .amount > .price {   
Antwort
von tWeuster, 26

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 > .amount

Oder 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.

Kommentar von medmonk ,

Das zwei Spans ineinander verschachtelt sind, ist dir nicht aufgefallen? ;-) CSS funktioniert zwar, das Markup trotzdem verhunzt (nicht valide) ist. 

LG medmonk  

Kommentar von tWeuster ,

Mir ist neu das spans nicht verschachtelt sein dürfen!?

Kommentar von medmonk ,

Sorry, mich da revidieren. Spans dürfen natürlich ineinander verschachtelt werden. Muss wohl ein Tippfehler beim validieren drin gehabt haben der der Validator hat herum gespackt. Nichts für ungut. 

LG medmonk  

Keine passende Antwort gefunden?

Fragen Sie die Community