CSS-Klasse ansprechen nur bei anderer CSS-Klasse?

... komplette Frage anzeigen

7 Antworten

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 

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
28.03.2016, 10:54

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 

0

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/

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
26.03.2016, 03:31

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 

0

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.

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von medmonk
24.03.2016, 23:24

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

LG medmonk  

0

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

.product-details > .amount > .price {   
Antwort bewerten Vielen Dank für Deine Bewertung

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

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von kontolukas
24.03.2016, 15:46
.product-details > .amount{

color: #9B9B9B !important;

text-align: center !important;

text-transform: uppercase !important;

font-size: 60px !important;

line-height: 15px !important;

}
0

Der zugehörige CSS-Selector lautet

parent > child {
   ...
}
Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von kontolukas
24.03.2016, 15:46
.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

0

.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 bewerten Vielen Dank für Deine Bewertung

Was möchtest Du wissen?