Links innerhalb div mit id ansprechen klappt nicht so, wie sonst

[Philipp.]

Hi,

ich habe auf meiner Seite mehrere divs, diese haben eine eindeutige id <div id="meine_id"> und werden über CSS bisher so angesprochen: #meine_id { }

Jetzt habe ich ein neues div innerhalb einer Seite erstellt, dieses hat wiederrum eine eindeutige id (die garantiert sonst nicht vorkommt), kann über den genannten Weg aber nicht korrekt angesprochen werden. "Nicht korrekt" bedeutet, einige CSS-Formatierungen werden korrekt angezeigt, andere werden aber ignoriert.

Ich habe bspw. diesen Code:

  
#meine_id a:link { color:#000; text-decoration:none; }  
#meine_id a:visited { color:#000; text-decoration:none; }  
#meine_id a:hover { color:#FFF; text-decoration:none; background-color: #39F; }  
#meine_id a:active { color:#000; text-decoration:none; }  
  

~~~~~~html
  
<div id="page">  
  <div id="inhalt">  
    <div id="meine_id">  
      <a href="#">Link</a>  
    </div>  
  </div>  
</div>  

Der ge-hover-te Link wird aber in grauer Schrift und unterstrichen angezeigt, obwohl diese Formatierung (sowohl Farbe als auch Unterstrich), weder bei dieser id, noch sonst irgendwo auf der gesamten Seite Verwendung findet. Andere Links in <div id="inhalt"> spreche ich auf die selbe Weise an (#inhalt a:hover { }) und dort werden alle Formate korrekt übernommen.

Das Problem in "meine_id" konnte ich jetzt lösen. Der CSS-Teil sieht dafür  so aus:

div#meine_id a:link { color:#000; text-decoration:none; }  
div#meine_id a:visited { color:#000; text-decoration:none; }  
div#meine_id a:hover { color:#FFF; text-decoration:none; background-color: #39F; }  
div#meine_id a:active { color:#000; text-decoration:none; }

Woher kommt das, wieso muss ich hier plötzlich ein "div" vor die id "#meine_id" setzen? Hat das evtl. etwas mit absoluten und relativen Positionierungen der divs zueinander zu tun; wäre es sinnvoll, bei identischen Fällen, das div immer vor die id zu setzen?

[Felix Riesterer]

Lieber Philipp.,

Dein Problem scheint etwas mit der <http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität von CSS Selektoren> zu tun zu haben.

wäre es sinnvoll, bei identischen Fällen, das div immer vor die id zu setzen?

Es wäre sinnvoll, Deine DIV-Suppe zu entsorgen und semantischen Code zu schreiben. Wenn ich schon wieder diesen Irrsinn lese von wegen <div id="quatsch"><a href="#">Link</a></div> *grrr*

Liebe Grüße,

Felix Riesterer.

[Philipp.]

Ich meine, dass liegt daran, weil du vorher für DIV schon allgemein etwas definiert hattest. Wenn du nur #id schreibst wie aber die Definition für DIV nicht überschreiben, wenn du aber eindeutig sagst, der DIV mit der #ID dann wirds überschrieben...

Aber sollten untergeordnete Anweisungen die von darüber nicht überschreiben?

Es wäre sinnvoll, Deine DIV-Suppe zu entsorgen und semantischen Code zu schreiben. Wenn ich schon wieder diesen Irrsinn lese von wegen <div id="quatsch"><a href="#">Link</a></div> *grrr*

Ööööh ... :D

Was genau ist daran schlecht/falsch? Natürlich steht in dem div mehr als nur dieser Link. Einen einzelnen Link formatiere ich direkt, aber hier geht's um ein div mit Text, wo halt zwischendrin Links stehen, die ich gerne generell über die id des divs ansprechen wollte. also:

<div id="meine_id">  
  <h1>Überschrift</h1>  
    <p> Toller Text .. <a href="#">Link</a> ... </p>  
</div>

(ich dachte, ich lasse den ganzenText drumherum mal für das Beispiel weg :))

[Mike]

»» Ich meine, dass liegt daran, weil du vorher für DIV schon allgemein etwas definiert hattest. Wenn du nur #id schreibst wie aber die Definition für DIV nicht überschreiben, wenn du aber eindeutig sagst, der DIV mit der #ID dann wirds überschrieben...

Aber sollten untergeordnete Anweisungen die von darüber nicht überschreiben?

Habe ich nicht versucht das zu erklären? Sobald du angibst, dass #id eine untergordnete Anweisung von DIV ist, tut er das doch auch. Ansonsten wie soll der Browser wissen, dass sich #id auf ein DIV bezieht und nicht auf ein P? Der müsste das ja quasi vorher prüfen. Oder was inner Art ^^

[Philipp.]

Habe ich nicht versucht das zu erklären? Sobald du angibst, dass #id eine untergordnete Anweisung von DIV ist, tut er das doch auch. Ansonsten wie soll der Browser wissen, dass sich #id auf ein DIV bezieht und nicht auf ein P? Der müsste das ja quasi vorher prüfen. Oder was inner Art ^^

Nichts muss er prüfen :)

Er soll die Styles von #meine_id *überall* dort anwenden, wo eben id="meine_id" angegeben ist. Ob das im HTML-Code dann ein p oder ein div ist, ist ja erstmal egal.

[Mike]

Er soll die Styles von #meine_id *überall* dort anwenden, wo eben id="meine_id" angegeben ist. Ob das im HTML-Code dann ein p oder ein div ist, ist ja erstmal egal.

Weil du vorher geschrieben hast: DIV = rot ... Dann schreibste #ID = blau....
Hätteste nicht DIV = rot geschrieben, hätte der Browser die Info ja direkt von #ID genommen.
Um das zu überschreiben, brauchste dann DIV#ID

Ich habe das selbst nur aus der Praxis geschlossen und es ist auch logisch. Verstehe nicht, was du da jetzt nicht verstehen solltest oder was für eine besondere Antwort du da noch erwartest?:::?

[Philipp.]

Weil du vorher geschrieben hast: DIV = rot ... Dann schreibste #ID = blau....

Hab ich ja nicht.

Ich habe bisher bspw.

#inhalt a:link    { color:#900; text-decoration:none; }  
#inhalt a:visited { color:#900; text-decoration:none; }  
#inhalt a:hover   { color:#000; text-decoration:none; }  
#inhalt a:active  { color:#900; text-decoration:none; }  
  
#hinweis a:link    { color:#000; text-decoration:none; }  
#hinweis a:visited { color:#000; text-decoration:none; }  
#hinweis a:hover   { color:#FFF; text-decoration:none; background-color: #39F; }  
#hinweis a:active  { color:#000; text-decoration:none; }

<div id="inhalt">  
  <a href="#">Link</a> <!-- wird korrekt formatiert -->  
  
  <div id="hinweis">  
    <a href="#">Link</a> <!-- wird *nicht* korrekt formatiert -->  
  
  </div>  
</div>

Der Link unter #hinweis wird nicht korrekt formatiert (andere Farbe, mit Unterstrich), obwohl die angezeigte Farbe + Unterstrich nirgends vorkommt. Es scheinen die Standardsettings von unformatierten Links zu sein - so, als ob *keine* Formatierung greift. Schriftart und Hintergrundfarbe werden aber korrekt angezeigt.

[Felix Riesterer]

Lieber Philipp.,

<div id="inhalt">

<a href="#">Link</a> <!-- wird korrekt formatiert -->

<div id="hinweis">
    <a href="#">Link</a> <!-- wird nicht korrekt formatiert -->

</div>
</div>

  
dann musst Du wohl doch die Spezifität Deiner Selektoren erhöhen... oder die !important-Regel einsetzen (lieber nicht).  
  
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)

[Philipp.]

dann musst Du wohl doch die Spezifität Deiner Selektoren erhöhen... oder die !important-Regel einsetzen (lieber nicht).

Okay, werd ich tun (ersteres), danke schön. Eine logische Erklärung gibt's aber anscheinend nicht; eine "Vererbungsproblem" kanns ja auch nicht sein.

[ChrisB]

Hi,

dann musst Du wohl doch die Spezifität Deiner Selektoren erhöhen... oder die !important-Regel einsetzen (lieber nicht).

Okay, werd ich tun (ersteres), danke schön. Eine logische Erklärung gibt's aber anscheinend nicht; eine "Vererbungsproblem" kanns ja auch nicht sein.

Das koennte man erst dann beurteilen, wenn du ein vollstaendiges (und valides) HTML-Dokument nebst *aller* zugehoerigen Formatierungsanweisungen bereitstellst.

MfG ChrisB

[Mike]

»

Woher kommt das, wieso muss ich hier plötzlich ein "div" vor die id "#meine_id" setzen? Hat das evtl. etwas mit absoluten und relativen Positionierungen der divs zueinander zu tun; wäre es sinnvoll, bei identischen Fällen, das div immer vor die id zu setzen?

Ich meine, dass liegt daran, weil du vorher für DIV schon allgemein etwas definiert hattest. Wenn du nur #id schreibst wie aber die Definition für DIV nicht überschreiben, wenn du aber eindeutig sagst, der DIV mit der #ID dann wirds überschrieben...

So habe ich es mir erklärt, als ichs festgestellt habe. Hat was wohl mit Hirarchie zu tun.