Selektoren

[Public Property]

Guten Tag!

Ich habe eine Frage zu den Selektoren in CSS.

Ich verstehe dieses Beispiel:

.Feature_Block_Small_Out .Upper {}

so, dass ich alle Elemente anspreche, die beide Klassen gemeinsam haben. Ist das richtig?

Ich nutze diese Konstruktion, um mehrteilige Elemente, bei Mousover über das umschließende Elternelement mit Hintergrundgrafiken zu versehen. Die umschließende Ebene hat die Klasse Feature_Block_Small_Out und beinhaltet drei Ebenen die mit den Klassen Upper, Mid und Lower versehen sind. Bei Mouseover weise ich nun dem Element mit der Klasse Feature_Block_Small_Out , die Klasse Feature_Block_Small_Over zu und habe dafür wieder drei Selektoren für Upper, Mid und Lower formuliert.

Es funktioniert auch. Aber, wenn ich eine zweite ähnliche Konstruktion verwende, in der die Klasse des umschließenden Elements anders heißt:

.Feature_Block_Large_Out .Upper {}

habe ich Probleme mit der Darstellung. Einige, aber nicht alle Elemente der zweiten Konstruktion haben dann plötzlich keine Formatierungen mehr. Es sieht so aus, als ob die Selktoren dann nicht richtig griefen. Ich habe also entweder ein falsches Verständnis von ddiesen kombinierten Selktoren oder einen anderen Fehler :)

[Beat]

Ich verstehe dieses Beispiel:

.Feature_Block_Small_Out .Upper {}

so, dass ich alle Elemente anspreche, die beide Klassen gemeinsam haben. Ist das richtig?

Nein!
http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente

... Ich habe also entweder ein falsches Verständnis von ddiesen kombinierten Selktoren oder einen anderen Fehler :)

Überprüfe dein Verständnis, für andere Probleme ist ein Online-Beispiel hilfreich.

mfg Beat

[Public Property]

Hallo Beat!

Vielen Dank für Deine Antwort!

ich muss wohl umdenken. Seltsam, dass es solange perfekt funktioniert, wie ich keine zwei unterschiedlichen Elternklassen verwende :)

Kannst Du mir einen Lösungansatz nennen, wie ich eine vertikal variable Box in der Form:

<div class"Box">
   <div class="Head"></div>
   <div class="Body"></div>
   <div class="Foot"></div>
</div>

mit wechselnden Hintergrundgrafiken versehen kann? Wenn ich mit der Maus über die Box fahre, sollen die Hintergrundgrafiken der drei enthaltenen Ebenen gewechselt werden. Beim Verlassen der Box natürlich auch. Ich wollte vermeiden große Java Scripts einzusetzen, mit denen das zwar ein Kinderspiel wäre, die ich aber nicht gerne in mein CMS einbinden möchte.

Mein oben beschriebener Ansatz hat bei Mouse Over die Klassen der Box verändert:

onmouseover="this.className='Box_Over'" in der Annahme, dass die CSS Anweisung

Box_Over .Head{ background-image...} dann die Hintergrundgrafik des Element mit der Klasse Head verändert. Es funktioniert ja auch, warum eigentlich?

[ChrisB]

Hi,

Kannst Du mir einen Lösungansatz nennen, wie ich eine vertikal variable Box in der Form:

<div class"Box">
   <div class="Head"></div>
   <div class="Body"></div>
   <div class="Foot"></div>
</div>

mit wechselnden Hintergrundgrafiken versehen kann? Wenn ich mit der Maus über die Box fahre, sollen die Hintergrundgrafiken der drei enthaltenen Ebenen gewechselt werden. Beim Verlassen der Box natürlich auch.

In dem du passende Selektoren um die Nutzung der Pseudoklasse :hover erweiterst, und dafür dann jeweils ein anderes Hintergrundbild angibst.

Mein oben beschriebener Ansatz hat bei Mouse Over die Klassen der Box verändert:

onmouseover="this.className='Box_Over'" in der Annahme, dass die CSS Anweisung

Box_Over .Head{ background-image...} dann die Hintergrundgrafik des Element mit der Klasse Head verändert. Es funktioniert ja auch, warum eigentlich?

Es gibt keine „CSS Anweisungen“, und so wie gezeigt funktioniert der Code auch nicht, weil es kein Element mit dem Namen(!) Box_Over gibt.

Wenn du stattdessen die Klasse Box_Over meinst und im CSS auch den entsprechenden Selektor notierst - dann funktioniert das ganze, weil das Leerzeichen zwischen den beiden Klassenbezeichnern den Nachfahrenselektor darstellt.

MfG ChrisB

[Der Martin]

Hallo,

Ich verstehe dieses Beispiel:

.Feature_Block_Small_Out .Upper {}

so, dass ich alle Elemente anspreche, die beide Klassen gemeinsam haben. Ist das richtig?

nein, das spricht alle Elemente an, die dir Klasse "Upper" haben und irgendwo *innerhalb* eines weiteren Elements mit der Klasse "Feature_Block_Small_Out" liegen. Du kombinierst bei diesem Beispiel den Klassenselektor "." mit dem Nachfahrenselektor " " und einem weiteren Klassenselektor als Nachfahren.

So long,
 Martin

[Public Property]

Hallo,

Ich verstehe dieses Beispiel:

.Feature_Block_Small_Out .Upper {}

so, dass ich alle Elemente anspreche, die beide Klassen gemeinsam haben. Ist das richtig?

nein, das spricht alle Elemente an, die dir Klasse "Upper" haben und irgendwo *innerhalb* eines weiteren Elements mit der Klasse "Feature_Block_Small_Out" liegen. Du kombinierst bei diesem Beispiel den Klassenselektor "." mit dem Nachfahrenselektor " " und einem weiteren Klassenselektor als Nachfahren.

So long,
Martin

Hallo Martin!

Ich merke gerade, dass ich mich falsch ausgedrückt habe. Ich erwarte genau das, was Du beschrieben hast. Deshalb funktioniert es auch. Wenn das so ist, muss der Fehler, den ich suche an einer anderen Stelle sein. Ich prüfe das noch einmal.

Vielleicht noch einmal im Detail, falls es auch andere interessiert:

Es gibt eine Ebene mit einer Klasse "_out", innerhalb dieser Ebene liegen weitere Ebenen, die alle eigene Hintergrundgrafiken haben. Wenn ich mit der Maus über die Ebene mit der Klasse "_out" fahre, sollen alle Hintergrundgrafiken angepasst werden.

Ich erreiche das mit dem Selektor "_out .Upper {}" etc. Weise ich bei Mousover der Ebene mit der Klasse "_out" nun die Klasse "_over" zu, kann ich alle darin enthaltenen Ebenen gleichzeitig ansprechen mit "_over .Upper{}"

Da ich Fehler in der Darstellung sehe, liegen diese anscheinend an einer anderen Selektoren Formulierung.

Vielen Dank für die Antworten!

[Cheatah]

Hi,

Hallo,

bitte zitiere nur das, worauf Du Dich beziehst, danke.

Es gibt eine Ebene mit einer Klasse "_out",

Fehlerquelle 1: In Deinem Selektor steht nicht "_out", sondern "_Out".

Weise ich bei Mousover der Ebene mit der Klasse "_out" nun die Klasse "_over" zu,

Fehlerquelle 2: Beim Mouseover eines Elementes innerhalb dieses Elementes wird nebenbei ein Mouseout auf das äußere Element ausgeführt. Zwar folgt ein Mouseover, das kann aber dennoch stören. Warum arbeitest Du eigentlich nicht einfach mit der Pseudoklasse :hover?

Cheatah