css-"operator"

Greg10

also erstmal damit man weiß was ich meine:

Code

body div.1 + div.2 {
background-color:red;
}

dieser code würde jedem div der innerhalb von body direkt auf einen anderen div folgt einen roten hintergrund geben.
Ich suche eigentlich das selbe, nur das die divs nicht direkt hinereinander stehen müssen.
Mit dem gesuchten operator würden also alle divs die innerhalb von body mit einem anderem div existieren einen roten hintergrund bekommen.
gibt es sowas?

sejuma

Wenn in body eine Hintergrundfarbe definiert ist, dann ist diese Farbe auf der kompletten Seite und schlägt auf alle div's durch, soweit nicht abweichend definiert.
Also brauchst du solche Konstruktionen doch gar nicht.
Oder ist das nicht das Problem?

Greg10

nein, das war nur ein beispiel^^
und das beispiel oben definiert NICHT für body den hintergrund sondern auf einen div, der direkt auf einen anderen div folgt
(faustregel: immer auf das, das DIREKT vor der "{" steht ;-))

yeti66

Greg10,

Code

body div.1 + div.2 {
background-color:red;
}

Code

div.1,  div.2 {
background-color:red;
}

Code

body div.1 + div.3{
background-color:red;
}

ist doch egal + steht für und

Greg10

nein + steht nicht für und^^
zumindest laut selfhtml
1. code funktioniert nur wenn die divs direkt hintereinander stehen (das tun sie bei mir nicht)
2.code weist generell den beiden kalssen eine hitergrund farbe zu, das soll aber NUR der fall sein, wenn auch ein zweiter div vorhanden ist
3.code ist wie 1. nur mit ner andren klasse

was ich konkret will:
ein dropdown mit css, allerdings nicht mit einer liste, sondern mit einem div und einem link, beide sind in ein und dem selben eltern-tag
ich dachte mir dass so, dass ich mit diesem operator den div dann display-block zuweise, wenn die pseudoklasse a.nav:hover auch enthalten ist, da link und div allerdings nicht direkt hintereinander stehen tuts der + operator halt nich

yeti66

Greg10,

+ = und schon nur unter folgender Bedingung:

Zitat

Plus-Verknüpfung
Mit der Plus-Verknüpfung werden in CSS 2 weitere Möglichkeiten wahr. Über die Plus-Verknüpfung kann man Elemente ansprechen, die direkt aufeinandern folgen.

p + strong {color: #ff0000}

Für mehr ist es nicht gedacht.

Greg10

und die wird nicht erfüllt^^

Zitat von Greg10

(das tun sie bei mir nicht)

The User

yeti, beim plus wirkt das nur auf den hinteren "summanden".
aber wass hat es denn mit den classes 1 und 2 auf sich?

Greg10

also die eine klasse soltte sein: a#sub:hover die zweite: div#drowpdown normalerweise ist bei #dropdown display auf none aber sobald sich die maus über den link bewegt, soll auf display-block gheschaltet werden
mit dem + operator funktioniert das schonmal, nur dass dieser verlangt, dass die beiden tags direkt aufeinander folgen, und dass ist nicht der fall.
Ich habe jetzt zwar eine js-lösung gebastelt, aber css wär da doch eher angebracht, finde ich.

The User

also als ich mir denn dropdown gebastelt habe, der funktioniert, hatte ich auch das problem, dass der nicht alle gezeigt hat und so.
Ich war dann doch dazu gezwungen, die sublinks alle in ein <ul>[*] zu packen.
Ich hab dann das a.main:hover + ul li.submenu a gemacht.
Dadurch werden alee as im li angesprochen.
statt ul li kannst du zwar div oder so benutzen, das hat aber dann den nachteil, dass das dropdown wahrscheinlich beim rüberfahren über die links auf jeden fall sich nicht vollständig erhalten lässt, deshalb dann li.submenu:hover benutzen.
Das funktioniert

Viele liebe Grüße
The User

knollo

Hi

body div.1+div.2
+ = Benachbarte Stielregel: Legt eine bestimmte Reihenfolge fest, in der HTML/XHTML-Befehle aufeinander folgen müssen, damit die Stilregel angewandt werden kann.

body div.1>div.2
> = Vater-Kind-Stielregel: Gilt nur in Kombination Vater-Kind(auf Schachtelungsstruktur bezogen).
Denke mal, wenn ich deine Frage richtig verstanden habe, ist das die Lösung für dich.

Aber gegen JS ist auch nichts einzuwenden oder einfach mit Pseudo-Klassen umsetzen.
mfg

Greg10

nein, vater-kind bringt mir auch nichts, die classen sollen ja nicht verschachtelt sein, sondern innerhalb eines eltern-elements nebeneinander existieren, wobei das eltern-element keine rolle spielt.
das problem am + ist nur, dass da die befehle aufeinander folgen müssen, was bei mir nicht der fall ist

Wär vieleicht mal ne Hilfe dein Quälcode zu sehen!

Greg10

da is nich viel zu sehen^^

Code

<div class="navi">
<a class="drpd">&darr;</a>[img]blind.gif[/img][url='url']Link[/url]


<div class="drop">
weiterer text
</div>
</div>

The User

wie wäre es mit:

Code

div.navi a.drpd:hover+div.drop { display: block; } oder visibility: visible

Das wäre doch ganz einfach!

Greg10

oder ?
was ist das denn?

The User

Ja es gibt die Möglichkeit mit dusplay: none und visibility: invisible.
Aber das geht ja nicht weils folgen muss, also was ich gerade geschrieben habe geht nicht.
Also machs so:

Code

<div class="navi">
<a class="drpd">
Text
</a>
<div class="direktdanach">
<img> und was da noch so war
<div class="drop">
Das Unsichtbare
</div>

Code

div.navi a.drpd:hover+div.direktdanach div.drop { display: block; }

Das Unsichtbare sollte aber kein Link sein, sonst kannst du den nicht drücken.

The User

Also Greg hat es mir im Chat nochmal erklärt:
Wenn man einen Link anklickt, soll ein bestimmter Bereich sichtbar werden.
Meine Lösung funktioniert zwar nur mit CSS, allerdings wird der Bereich wieder ausgblendet, wenn man mit dem Cursor das Browserfenster verlässt.
Es werden hoffentlich nicht alle das Browserfenster verlassen, und die meisten Besucher werden es für ihren Fehler halten
CSS: (mit ein paar hintergrundfarben, hab ich gemacht, um zu sehen, ob die dinger jetzt wirklich da sind, und ob die eigenschaften wirken)

Code

div.all { display: none; position: absolute; left: 0; top: 0; z-index: 0; height: 100%; width: 120%;}
div.activator { height: 100px; width: 250px; background-color: #ff0000;}
div:active.activator+div.all {display: block; }
div:hover.all {display: block; }
div.invisible { display: none;  }
div:hover.all+div.invisible { display: block; z-index: 100; }

HTML:

Code

<div class="activator">
Hallo!
</div>
<div class="all">
</div>
<div class="invisible">
Hier bin Ich!
</div>

Ich hoffe das reicht!

The User

Tags