oxo888oxo: Link-Zustände per CSS

Hallo

Es geht mir um Links in meiner Navigation.
Die Navigation ist eine Liste mit der Class "Navigation".
Links sollen die Farbe #313131 haben und nicht unterstrichen sein.
Hover soll unberücksichtigt bleiben, weil ja auf mobilen Geräten sinnlos.
Visited ist in einer Navigation ja auch nicht schön, denke ich.

Aktuell habe ich es so gemacht:

  ul#Navigation a:link {  
    text-decoration: none;  
    color: #313131;  
  }  
  
  ul#Navigation a:hover, ul#Navigation a:focus, ul#Navigation a:active {  
    color: #ca1600;  
  }

Kann ich das noch weiter optimieren?
Ginge es auch so?

  ul#Navigation a:link {  
    text-decoration: none;  
    color: #313131;  
  }  
  
  ul#Navigation a:hover, a:focus, a:active {  
    color: #ca1600;  
  }

Oder werden damit dann für focus und active auch wieder alle Links ausserhalb meiner Navigation angesprochen?

Gruß
Ingo

  1. Hi,

    Es geht mir um Links in meiner Navigation.
    Hover soll unberücksichtigt bleiben, weil ja auf mobilen Geräten sinnlos.

    auf herkömmlichen Desktop-Browsern ist es aber immer noch wirksam und kann visuell hilfreich sein, wenn es dezent verwendet wird. Absolutes No-Go sind Größenänderungen, die dazu führen, dass andere Elemente hin- und herrutschen. Aber Farbumschläge, Unterstreichungen oder ähnliche visuelle Effekte finde ich durchaus vernünftig.

    Visited ist in einer Navigation ja auch nicht schön, denke ich.

    Auch hier: Kommt drauf an. Eine leicht abweichende Anzeige für :visited finde ich durchaus in Ordnung, aber sie sollte sich nicht dramatisch von der Normaldarstellung unterscheiden. Erkennbar, aber nicht aufdringlich.

    ul#Navigation a:link {

    text-decoration: none;
        color: #313131;
      }

    ul#Navigation a:hover, ul#Navigation a:focus, ul#Navigation a:active {
        color: #ca1600;
      }

    
    >   
    > Kann ich das noch weiter optimieren?  
      
    Was genau möchtest du daran optimieren?  
      
    
    > Ginge es auch so?  
    > ~~~css
    
      ul#Navigation a:link {  
    
    >     text-decoration: none;  
    >     color: #313131;  
    >   }  
    >   
    >   ul#Navigation a:hover, a:focus, a:active {  
    >     color: #ca1600;  
    >   }
    
    

    Natürlich ginge das, aber es ist etwas anderes. Das Komma trennt mehrere Selektoren in einer Aufzählung, von denen aber jeder einzelne für sich betrachtet wird. Das Komma bedeutet keine Gruppierung!

    Oder werden damit dann für focus und active auch wieder alle Links ausserhalb meiner Navigation angesprochen?

    Genau das.

    Ciao,
     Martin

    --
    F: Kennt jemand einen Automobilfilm?
    A: Der mit dem Golf tankt.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. Hallo

      auf herkömmlichen Desktop-Browsern ist es aber immer noch wirksam und kann visuell hilfreich sein, wenn es dezent verwendet wird.

      OK stimmt auch wieder.
      Dann werde ich das drinlassen.

      Absolutes No-Go sind Größenänderungen, die dazu führen, dass andere Elemente hin- und herrutschen.

      Jo, wenn es eines gibt, was ich hasse, dann genau das! :-)

      »Visited ist in einer Navigation ja auch nicht schön, denke ich.
      Auch hier: Kommt drauf an. Eine leicht abweichende Anzeige für :visited finde ich durchaus in Ordnung, aber sie sollte sich nicht dramatisch von der Normaldarstellung unterscheiden. Erkennbar, aber nicht aufdringlich.

      Ja richtig, habe ich bei mir im Rest der Seite auch so gemacht.
      Aber in der Navigation finde ich es eher störend.

      Oder werden damit dann für focus und active auch wieder alle Links ausserhalb meiner Navigation angesprochen?
      Genau das.

      OK alles klar.
      Danke

      Gruß
      Ingo

  2. @@oxo888oxo:

    nuqneH

    Visited ist in einer Navigation ja auch nicht schön, denke ich.

    Aktuell habe ich es so gemacht:

    ul#Navigation a:link {

    text-decoration: none;
        color: #313131;
      }

      
    Und waum stylst du dann [nur unbesuchte Links](http://forum.de.selfhtml.org/archiv/2012/1/t208525/#m1419277) und erzeugst damit (ungewollt) eine Unterscheidung)?  
      
    Qapla'
    
    -- 
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    
    1. Hallo Gunnar

      Und waum stylst du dann nur unbesuchte Links und erzeugst damit (ungewollt) eine Unterscheidung)?

      Eine durchaus berechtige Frage, würde ich mal sagen :-)
      Dann sollte es wie folgt korrekt sein, wenn ich Dich richtig verstanden habe.
      Habe ich?

        ul#Navigation a {  
          text-decoration: none;  
          color: #313131;  
        }  
        
        ul#Navigation a:hover, ul#Navigation a:focus, ul#Navigation a:active {  
          color: #ca1600;  
        }
      

      Gruß
      Ingo

      1. @@oxo888oxo:

        nuqneH

        ul#Navigation a

        Selektoren sollten so spezifisch wie nötig, so  unspezifisch wie möglich sein. 'ul' ist überflüssig.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Hallo Gunnar

          Selektoren sollten so spezifisch wie nötig, so  unspezifisch wie möglich sein. 'ul' ist überflüssig.

          Ah jo stimmt.
          Goil, wieder was gelernt.
          Dann werde ich da nochmal drübergucken.

          Gruß
          Ingo

  3. @@oxo888oxo:

    nuqneH

    Ginge es auch so?

    ul#Navigation a:hover, a:focus, a:active {

    color: #ca1600;
      }

      
    Protip: In Sass kann man das als  
      
    ~~~css
    #Navigation  
    {  
      a:hover,  
      a:focus,  
      a:active  
      {  
        color: #ca1600;  
      }  
    }
    

    oder

    #Navigation a  
    {  
      &:hover,  
      &:focus,  
      &:active  
      {  
        color: #ca1600;  
      }  
    }
    

    schreiben.

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)