Problem bei Auflistungen und ungewollter Vererbung

[Patrick Schröder]

Hi ihr,

ich habe nachdem ich in CSS eigentlich recht fit bin, doch ein Problem mit ungewollter Vererbung.
Ich kann soweit zumindest sagen, dass mein CSS korrekt ist, habe jedoch ein Verständnis-Problem.

Und zwar wirkt sich folgendes auf andere Listen zuvor aus. Frage: Warum?

ul.name li  {
  // ...
}
ul.name li a,
           a:link,
           a:visited,
           a:hover,
           a:focus,
           a:active {
  // ...
}

Eigentlich ist ja durch das ul.name das Elternelement eindeutig festgelegt. Aber sowohl die Deklaration für li als auch die a im li von ul.name wirken sich auch auf völlig andere Listen aus.

Dass ich dabei die Pseudo-Elemente deklariere nimmt ja darauf eigentlich keinen Einfluss...

[Cheatah]

Hi,

Und zwar wirkt sich folgendes auf andere Listen zuvor aus. Frage: Warum?
ul.name li a,
           a:link,
           a:visited,
           a:hover,
           a:focus,
           a:active {
  // ...
}
Eigentlich ist ja durch das ul.name das Elternelement eindeutig festgelegt.

ja, ist es. Nur die <a>-Elemente, die sich innerhalb der <li>-Elemente des mit "name" klassifizierten <ul>-Elements befinden, werden selektiert; außerdem alle <a>-Elemente des Dokuments, die besuchte oder unbesuchte Links sind, die gehovert, fokussiert oder aktiviert werden.

Dass ich dabei die Pseudo-Elemente deklariere nimmt ja darauf eigentlich keinen Einfluss...

Pseudo-Klassen, nicht -Elemente.

Cheatah

[Patrick Schröder]

Hi,

Und zwar wirkt sich folgendes auf andere Listen zuvor aus. Frage: Warum?
ul.name li a,
           a:link,
           a:visited,
           a:hover,
           a:focus,
           a:active {
  // ...
}
Eigentlich ist ja durch das ul.name das Elternelement eindeutig festgelegt.

ja, ist es. Nur die <a>-Elemente, die sich innerhalb der <li>-Elemente des mit "name" klassifizierten <ul>-Elements befinden, werden selektiert; außerdem alle <a>-Elemente des Dokuments, die besuchte oder unbesuchte Links sind, die gehovert, fokussiert oder aktiviert werden.

Wenn ich dich richtig verstehe ist es das was passiert, aber ich versteh nciht so ganz warum!? Warum sind denn die <a>-Elemente außerhalb des Elternelements betroffen? Die Deklaration erfolgt an dieser Stelle doch nur für ul.name und nicht z.B. für ul.xyz

[Mathias Brodala]

Hallo Patrick.

ul.name li a,
           a:link,
           a:visited,
           a:hover,
           a:focus,
           a:active {
  // ...
}
Eigentlich ist ja durch das ul.name das Elternelement eindeutig festgelegt.

[…] Warum sind denn die <a>-Elemente außerhalb des Elternelements betroffen? Die Deklaration erfolgt an dieser Stelle doch nur für ul.name und nicht z.B. für ul.xyz

Nein, das hast du so nicht notiert. Du hast die Selektoren „ul.name li a“, „a:link“, „a:visited“, „a:hover“, „a:focus“ und „a:active“ notiert. Deine Einrückung deutet auf eine Fehlvermutung hin: du musst schon explizit festlegen, für welche a-Elemente mit der jeweiligen Pseudoklasse die Formatierungen gelten sollen:

ul.name li a,  
ul.name li a:link,  
ul.name li a:visited,  
/* usw. */ {  
}

Wobei du hier im Grunde nur den Selektor „ul.name li a“ benötigst. Dieser gilt dann auch für alle Zustände des a-Elementes.

Einen schönen Samstag noch.

Gruß, Mathias

[Patrick Schröder]

Hi Mathias,

okay, ich war (warum auch immer) der Meinung, dass die Kommata-Abtrennung sich dadurch automatisch auf das zuerst genannte Eltern-Element bezieht, aber so kann man irren. Danke an dich und den aderen für die Aufklärung und schöne Weihnachten!

Gruß Patrick

[rfb]

Moin

du müsstest

ul.name li a,
ul.name li a:link,
ul.name li a:visited,
ul.name li a:hover,
ul.name li a:focus,
ul.name li a:active {
  // ...
}

schreiben, also das Elternelement jedesmal wiederholen.
li kannst du übrigens weglassen, denn die Links müssen innerhalb von ul natürlich in einem li stehen.

Gruß
rfb

[OhneName]

Hallo,

ul.name li a,
           a:link,
           a:visited,
           a:hover,
           a:focus,
           a:active {

Deine Einrückung spielt dir hier einen Streich.

ul.name li a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {

Hier kannst du besser erkennen, was selektiert wird.

ul.name li a,
ul.name li a:link,
ul.name li a:visited,
ul.name li a:hover,
ul.name li a:focus,
ul.name li a:active {

So erreichst du den gewünschten Effekt.

Gruss,
OhneName