Element mit mehreren Klassen ansprechen

Sysop · #1 (**permalink**) 01.04.2008, 11:47

Hallo,

ich kann ja mit class="klasse_1 klasse_2" einem Element mehrere Klassen zuweisen.

Wenn ich jetzt den folgenden Markup habe:

Code:

<div class="class_1 class_2">
<a href="">foo</a>
</div>

Wie sieht das CSS aus, mit dem ich alle Links formatiere, die unterhalb eines Divs liegen, dem sowohl class_1 als auch class_2 zugewiesen ist?
Danke

derHund · #2 (**permalink**) 01.04.2008, 12:05

Code:

.class1.class2 a {
  background : #888;
}

fantasmo · #3 (**permalink**) 03.04.2012, 11:35

Ich hab noch einen ähnlichen Fall. Die CSS-Datei hab ich nicht selbst geschrieben, und sie verwendet diese "before" und "after"-Befehle, die ich eigentlich gar nicht kenne.

Also jedenfalls in einem Div ist ein Bild:

HTML-Code:

<div class="grafik">

Per CSS wird die Grafik dort so eingefügt

Code:

.grafik:before{background-image:Grafik-URL blabla}
.grafik:after{background-image:Grafik-URL blabla}

Das ist wie gesagt nicht mein CSS-Code, ich hätte das vermutlich irgendwie nur mit

Code:

.grafik{background-image:Grafik-URL blabla}

probiert.

Ich habe ein paar Änderungen an der Seite vor, deshalb muss ich das Bild über eine zweit Klasse einfügen. Aber ich will nicht zuviel dran umschreiben, weil ich Angst hab, dann funktionieren irgendwelche anderen Verbindungen nicht mehr, also erstmal unkompliziert halten... deshalb hab ich Folgendes probiert:

Im HTML ne zweite Klasse ergänzt:

HTML-Code:

<div class="grafik version2">

Und versucht das über CSS anzusprechen

Code:

.grafik:before.version2{
background-image: Grafik-URL blabla;
}
.grafik:after.version2{
background-image: Grafik-URL blabla;
}

Naja, das ging jedenfalls nicht...dabei macht man das doch so (mit Punkt dazwischen), wenn man ein Objekt ansprechen will, dass sogar durch zwei Klassen definiert ist, oder?(also deshalb hab ich auch nicht nur ".version2" in die CSS geschrieben, weil ich die Eindeutigkeit durch das noch dazustehene "grafik" genauer definieren wollte (hierarchiemäßig halt).
Oder geht das nicht, weil da schon diese Pseudoklasse mit Doppelpunkt steht??
Über ".grafik:before" und (..."after") erhält die Webseite in der CSS auch noch diverse andere Anweisungen, die wollte ich nicht anfassen, deshalb das mit der zweiten Klasse.

fricca · #4 (**permalink**) 03.04.2012, 13:29

Das Pseudoelement ans Ende stellen.

Bitte poste immer vollständigen Code, keine Schnipsel mit Pseudocode. Am besten ist immer ein Link. Siehe die Hinweise für Fragende.

andir · #5 (**permalink**) 03.04.2012, 13:29

Verständnisfehler.
IN dem div.grafik ist nach deinem Code kein Bild, es wird vorher und hinterher eingefügt

Lies Dich mal hier ein:

content: Inhalte einfügen: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Du hast ermutlich folgenden HTML-Aufbau von der Struktur her:

Elternelement open
Div-Element open/close
Elternelement close

Durch das CSS wird folgendes draus:

Elternelement open
Before-Inhalt
Div-Element open/close
After-Inhalt
Elternelement close

wobei du das Grüne hinterher im Quelltext nicht siehst.

Damit lassen sich Hintergrundbilder oder Randgrafiken ganz gut simulieren, sie skalieren so auch mit wachsender Länge des Elements mit.
Aber es sind keine Hintergrundbilder. M.W. ist auch die Angabe der background-image Eigenschaft hier nicht zulässig.

Es müsste also heißen:

Code:

#inner:before {content: url(test.gif);}
#inner:after {content: url(test.gif);}

Du kannst aber dem div.grafik, sofern es nicht noch über ein zusätzliches HG-Bild verfügt, einfach eines zuweisen.
Edit: Denk dir ".grafik" statt "#inner".

fricca · #6 (**permalink**) 03.04.2012, 13:36

Zitat:

Zitat von andir

M.W. ist auch die Angabe der background-image Eigenschaft hier nicht zulässig.

Doch, auch Pseudoelemente können Hintergrundbilder erhalten. Ob man in diesem Fall etwas davon sehen kann, lässt sich an den Schnipseln nicht beurteilen

fantasmo · #7 (**permalink**) 03.04.2012, 14:07

Vielen Dank für eure Hilfe.
Das mit dem "Pseudoelement hinten ran" war hier scheinbar der Grundfehler.

Aber sieht immernoch komisch aus, jetzt ist das Bild da, aber zweimal.
Ich muss mir das nochmal genauer anschauen und den ganzen Code besser nachvollziehen...um dann hier auch noch genauer die Frage zu stellen

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Übernächstes Element ansprechen	bolshi	Javascript & Ajax	3	28.01.2011 10:23
Bestimmtes Element über CSS ansprechen	Fragestunde	CSS	6	21.07.2009 19:35
Festanstellung bei der Xing AG als Web Developer (HTML/CSS)	NEOX	Offtopic	10	17.07.2008 17:11
2 Klassen für ein Element	ragtek	CSS	6	02.01.2008 23:25
Element label über id ansprechen	Evoli	CSS	8	28.08.2007 13:36