Amo: Links mit Klassen korrekt formatieren

Hallo,

kann mir jemand verraten, wie man korrekt (so, dass es definitiv in jedem Browser/auf jedem System läuft) Klassen für Links definiert. Ich finde immer verschiedene Lösungen, aber irgendwas muss doch mal von jemandem "abgesegnet" worden sein.

Link: <a class="class">...</a>

CSS-Formatierung:

Möglichkeit 1:
    a:link.class { ... }

Möglichkeit 2:
    .class:link { ... }

Möglichkeit 3:
    a.class:link { ... }

Scheinbar funktioniert das alles (zumindest hier), aber was sollte man verwenden? Oder hab ich hier wirklich die freie Wahl?

  1. öhm, also egtl müsste es langen wenn du
    a.class{}
    schreibst. Weil so ist der Tag <a> eindeutig der Klasse "class" zugeordnet, und das müsste auch jeder Browser so checken...
    Gruß, CS

    1. öhm, also egtl müsste es langen wenn du
      a.class{}
      schreibst. Weil so ist der Tag <a> eindeutig der Klasse "class" zugeordnet, und das müsste auch jeder Browser so checken...

      Nein, du kannst einem HTML- Tag per CSS nicht einer bestimmten Klasse zuweisen.

      Das Beispiel a.class{} greift nur für <a class="class">, und zum Beispiel nicht für <a class="bold">.

      Gruß, Kalle

      1. Das Beispiel a.class{} greift nur für <a class="class">, und zum Beispiel nicht für <a class="bold">.

        meinte ich ja^^ War nicht so glücklich ausgedrückt.

        1. Hi und danke schon mal. Mir ging es dabei aber nicht um das ':link', sondern wo die Klasse angegeben werden muss:

          Laut CSS4You so:

          ~~~css a.class:link { .. }
            a.class:visited { .. }
            a.class:hover { .. }
            a.class:active { .. }

            
            
          Aber es geht eben auch:  
            
            ~~~css
          .class:link { .. }  
            .class:visited { .. }  
            .class:hover { .. }  
            .class:active { .. }
          

          oder

          ~~~css a:link.class { .. }
            a:visited.class { .. }
            a:hover.class { .. }
            a:active.class { .. }

          1. ja, mit
            a.class:link { .. }
            sagst du "Alle Links, die in der Klasse "class" sind, sollen die und die Eigenschaft haben"

            mit
            .class { .. }
            sagst du "Alle Elemente, die in der Klasse "class" sind, sollen die und die Eigenschaft haben", d.h. es können auch <p>, <b>, <div> etc. "betroffen" sein.

            1. .class { .. }
              sagst du "Alle Elemente, die in der Klasse "class" sind, sollen die und die Eigenschaft haben", d.h. es können auch <p>, <b>, <div> etc. "betroffen" sein.

              Ja, wobei .class:xxxx ja nur bei Links existiert.

              Was ist aber der Unterschied von a.class:xxx und a:xxx.class?

              1. Hej!

                »» .class { .. }
                »» sagst du "Alle Elemente, die in der Klasse "class" sind, sollen die und die Eigenschaft haben", d.h. es können auch <p>, <b>, <div> etc. "betroffen" sein.

                Ja, wobei .class:xxxx ja nur bei Links existiert.

                Nö. Manche, z.B. :visited, sind nur bei Links sinnvoll, andere wie z.B. :hover gehen immer (wenn man mal von dem IE6-Bug absieht, daß selbiger :hover nur bei Links anwendet, :active falsch versteht und :focus gar nicht).

                Was ist aber der Unterschied von a.class:xxx und a:xxx.class?

                Da wüßte ich jetzt auch keinen. Bei mehreren Klassen ist die Reihenfolge ja auch egal (wenn man mal von dem IE6-Bug absieht, daß selbiger nur eine davon beachtet).

                Viele Grüße vom Længlich

                --
                Mein aktueller Gruß ist:
                Schwedisch
              2. » .class { .. }
                » sagst du "Alle Elemente, die in der Klasse "class" sind, sollen die und die Eigenschaft haben", d.h. es können auch <p>, <b>, <div> etc. "betroffen" sein.

                Ja, wobei .class:xxxx ja nur bei Links existiert.

                auch das ist falsch. http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm@title=Pseudoklassen existieren für alle möglichen Elemente.

                Was ist aber der Unterschied von a.class:xxx und a:xxx.class?

                Eine Pseudoklasse mit dem Namen xxxx.class existiert nicht. (auch nicht, wenn du für xxxx hover o.ä. einsetzt

                Struppi.

                1. @@Struppi:

                  »» Was ist aber der Unterschied von a.class:xxx und a:xxx.class?

                  Gar keiner.

                  „Ein einfacher Selektor ist entweder ein Typselektor oder ein universeller Selektor, unmittelbar gefolgt von null oder mehr Attribut-Selektoren, ID-Selektoren oder Pseudo-Klassen in beliebiger Reihenfolge.“ [CSS2 §5.2]

                  Eine Pseudoklasse mit dem Namen xxxx.class existiert nicht.

                  Die wurde ja auch nicht selektiert. Dazu müsste man '.' escapen.

                  Live long and prosper,
                  Gunnar

                  --
                  Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
                  1. » Eine Pseudoklasse mit dem Namen xxxx.class existiert nicht.

                    Die wurde ja auch nicht selektiert. Dazu müsste man '.' escapen.

                    Ich war mir auch nicht 100% sicher, hätte da wohl lieber meine Klappe gehalten oder testen sollen.

                    Struppi.

                    1. @@Struppi:

                      Ich war mir auch nicht 100% sicher, hätte da wohl lieber meine Klappe gehalten oder testen sollen.

                      Testen? Wie wär’s mit lesen?

                      Live long and prosper,
                      Gunnar

                      --
                      Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
                  2. »» »» Was ist aber der Unterschied von a.class:xxx und a:xxx.class?

                    Gar keiner.

                    Danke, dass war die eigentliche Frage :D

                    Dass es xxxx nicht gibt ist schon klar, ich dachte, dass das auch klar war :D

            2. ja, mit
              a.class:link { .. }
              sagst du "Alle Links, die in der Klasse "class" sind, sollen die und die Eigenschaft haben"

              Nein, das ist falsch.

              Struppi.

              1. Moin!

                »» ja, mit
                »» a.class:link { .. }
                »» sagst du "Alle Links, die in der Klasse "class" sind, sollen die und die Eigenschaft haben"

                Nein, das ist falsch.

                Es ist wenig hilfreich, eine Aussage als "falsch" zu deklarieren, ohne deine Version von "richtig" danebenzuschreiben, denn wenn die Aussage falsch ist, kann von der Logik her jede andere Aussage richtig sein.

                - Sven Rautenberg

                1. » Nein, das ist falsch.

                  Es ist wenig hilfreich, eine Aussage als "falsch" zu deklarieren, ohne deine Version von "richtig" danebenzuschreiben, denn wenn die Aussage falsch ist, kann von der Logik her jede andere Aussage richtig sein.

                  Da es hier nicht um die Orginalfrage ging, sondern der Versuch zu antworten, sah dies nicht als nötig an. Falls der OP aus den anderen Hinweisen nicht klar wird worum es mir hier geht, hätte er ja nachfragen können.

                  Struppi.

                  1. Oh Mann, lesen vor'm Posten.

                    Da es hier nicht um die Orginalfrage ging, sondern der Versuch zu antworten, sah dies nicht als nötig an. Falls der OP aus den anderen Hinweisen nicht klar wird worum es mir hier geht, hätte er ja nachfragen können.

                    Also noch mal:

                    Da es hier nicht um die Orginalfrage ging, sondern um den Versuch zu antworten, sah ich dies als nicht nötig an. Falls dem OP, mit den anderen Hinweisen nicht klar wurde, was ich meinte, hätte er ja nachfragen können.

                    Struppi.

  2. Hallo

    Siehe http://www.css4you.de/wscss/css03.html#uglpseudoklassen

    Reynhard B.

    --
    www.kick-image.at - www.cms-self-service-lite.at
  3. Hi,

    Möglichkeit 1:
        a:link.class { ... }

    Möglichkeit 2:
        .class:link { ... }

    Möglichkeit 3:
        a.class:link { ... }

    Scheinbar funktioniert das alles (zumindest hier), aber was sollte man verwenden? Oder hab ich hier wirklich die freie Wahl?

    Informiere dich, was es mit der Spezifität von Selektoren auf sich hat.

    MfG ChrisB

    --
    „This is the author's opinion, not necessarily that of Starbucks.“