Unterschied a.klasse:link und .klasse a:link

[LANtastic]

Original geschrieben von AnnaStesia in diesem Thread
was spricht gegen die Schreibweise a.content:bla bla, damit hatte ich noch nie Probleme.

Da es offensichtlich immer wieder kleine Probleme bei diesen beiden CSS-Konstruktionen gibt mal etwas grundsätzliches:

1.
.test a:link
.test a:visited
.test a:active
.test a:hover
.test a:focus


2.
a.test:link
a.test:visited
a.test:active
a.test:hover
a.test:focus

Auch wenn man es im ersten Moment nicht ganz so ernst nimmt, aber es gibt einen sehr grossen Unterschied zischen diesen beiden Defintionen.

Die unter 1. genannten Defintionen bewirken, daß alle Elemente A, die sich innerhalb der Klasse .test befinden, die nachfolgenden Formatierungen erhalten sollen.
Wohingegen 2. aussagt, daß alle Elemente A, die der Klasse .test zugeordnet wurden, die nachfolgenden Formatierungen erhalten sollen.

Das sind 2 grundsätzlich verschiedene Sachen.
Kleines Beispiel dazu, um es nochmal zu anschaulicher zu machen.

Man definiere als CSS :

<style type="text/css" media="all">
.test a:link, .test a:visited {
  background-color: lime;
  color:black;
}

a.anders:link, a.anders:visited {
  background-color: red;
  color:white;
  font-weight:bold;
}
.test a.anders:link, .test a.anders:visited {
  background-color: navy;
  color:white;
  font-weight:bold;
}
</style>

und als HTML Code folgendes :

<div class="test">
  Ich bin ein <a href="#">Link</a> <strong>innerhalb</strong> der Klasse .test<br>
  Ich bin auch ein <a href="#">Link</a> <strong>innerhalb</strong> der Klasse .test<br><br>
  ich bin aber ein anderer <a href="#" class="anders">Link</a>, 
  habe die Klasse .anders und bin <strong>innerhalb</strong> der Klasse .test
</div>
<div>
  Ich bin noch ein anderer <a href="#" class="anders">Link</a>,
  habe die Klasse .anders und befinde mich 
  <strong>nicht innerhalb</strong> der Klasse .test
  ich bin nur noch ein normaler <a href="#">Link</a>, ohne Klasse.
</div>

Ok, das Beispiel wird nicht in die Geschichte eingehen, aber es zeigt die Unterschiede, wenn ein Element via .test a:link und a.test:link formatiert wird.

Ich hoffe, daß hilft ein wenig weiter.

[prefix]

nur kurz die reihenfolge der pseudoklassen richtig stellen, ich denk, lantastic hat sich da vertippt.

die reihenfolgen muss wie folgt sein:

- a:link
- a:visited
- a:hover
- a:active
(-a:focus)

sollte diese reihenfolge nicht genauso eingehalten werden, so kommt es zu problemen bei der darstellung - vor allem im ie

[LANtastic]

oooooooooops
Prefix hat recht.