Mehrselektoren, wie sind sie alle richtig.

[Darian]

Hallo Leute,

oft frage ich mich, welche Selektoren eigentlich stimmen und welche nicht, habe schon viele gesehen, teilweilse funktionieren sie dann mehr oder weniger, oder auch nicht.

Besonders wenn ich mehrere Pseudelemente gleichzeitig selektieren will.

Darum wollte ich hier mal nachfragen, um ein klares Bild davon zu bekommen.


1. #element a:link, a:visited {}
#element a:hover, a:focus, a:active {}

Diese Möglichkeit habe ich mal bei einem Freund gesehen, hat jetzt aber dann bei einem Beispiel komischerweise nicht so funktioniert wie ich es wollte.

2. #element a:link:visited {}
#element a:active:hover:focus {}

Habe ich im Internet gefunden, und hat irgendwie auch nicht das richtige gemacht.

3. #element a:link, #element a:visited {}
#element a:hover, #element a:focus, #element a:active {}

Könnte ich mir vorstellen dass man immer so machen muß, aber vielleicht gibt es da auch eine einfachere Möglichkeit

4. table.class {}
table #id {}

Bei ids braucht man ein Leerzeichen, bei classes nicht?
Außer man nimmt #id.class {} dann braucht man da kein Leerzeichen? (obwohl ich mir da jetzt nicht sicher bin)

Vielleicht könnt ihr noch andere Beispiele nennen, damit wir eine halbwegs richtige und vollständige Liste bekommen, und sie dann irgendwo fixieren.

Oder gibt es da irgendwelche allgemeinen Syntax Regeln, die ich bis jetzt einfach noch nicht weiß?

Vielleicht gibt es da sogar schon was, was ich nicht gesehen habe?

Wäre für ein paar Infos dankbar.

lg Darian

 

[Maik]

Hi,

die ersten beiden Beispiele sind komplett falsch, Beispiel Nr.3 hingegen vom Prinzip her richtig, nur sind die letzten drei Pseudoklassen in der falschen Reihenfolge notiert:

#element a:focus, #element a:hover, #element a:active {}

Beispiel Nr.4 enthält zwei Typen von Selektoren: den Klassen-Selektor und den Selektor für Nachfahren.

Bitte lesen: Cascading Style Sheets, Level 2 - 5 Selektoren

mfg Maik

 

[Darian]

Ok danke, werde ich mir mal genauer ansehen.

Wusste ich aber gar nicht dass man da die Reihenfolge beachten muss. Was passiert den wenn nicht :focus :hover :active macht?

lg Darian

 

[Maik]

Im schlimmsten Fall funktionieren diese Pseudoklassen nicht wie gewünscht.

mfg Maik