Konni: Unterselector von li

Guten Tag,

ich möchte in einer Linkliste einige Liks "ausgrauen". Die Links stehen in einer Liste, wie gehe ich da vor? Wie heißt der Selector bzw. das dazugehörige css?

<div id='menue'>
<div class='head'>Mein Menue</div>
<ul>
<li>normaler Link</li>
<li>noch ein normaler Link</li>
--> und hier soll ein ausgegrautrer Link stehen
</ul>
</div>
#menue ul {
...
}

#menue li {
...
}

#menue li a,#menue li a:link {
...
}

#menue li a:visited {
...
}

#menue li a:hover,#menue li a:active,#menue li a:focus {
...
}

Konni

  1. Hallo,

    ich möchte in einer Linkliste einige Liks "ausgrauen". Die Links stehen in einer Liste, wie gehe ich da vor? Wie heißt der Selector bzw. das dazugehörige css?

    Soll nur die Farbe geändert werden eines vorhandenen, verlinkten Textes oder ist dann gar kein Link da? Oder -nach deinem Beispiel- handelt es sich stets um die 3ten Link?

    Wenn der Link wirklich ein Link ist, setze doch eine Klasse auf das Listelement und definieren diese dann im CSS.

    
    #menu li.grau a {
      color: #ccc;
    }
    

    Ggf. noch ergänzen: li.grau a:active, li.grau a:hover,li.grau a:focus

    Wenn der Link aber garnicht gesetzt wird, also auch kein <a> drumherum ist, dann könnte man sich das sparen und einfach die Farbe des Listelements auf Grau setzen.

    #menu li {
      color: #ccc:
    }
    
    #menu li a {
       color: blue;
    }
    

    Ciao, Wolfgang

    1. @@xwolf

      Wenn der Link wirklich ein Link ist, setze doch eine Klasse auf das Listelement

      Aber nicht "grau"! Das ist Unsinn.

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
      1. Wenn der Link wirklich ein Link ist, setze doch eine Klasse auf das Listelement

        Aber nicht "grau"! Das ist Unsinn.

        Das Setzen von Klassennamen sollte IMHO so sein, dass derjenige, die sie nutzt damit am Besten zurecht kommt. Dies scheint mir hier so der Fall zu sein.

        1. @@xwolf

          Das Setzen von Klassennamen sollte IMHO so sein, dass derjenige, die sie nutzt damit am Besten zurecht kommt. Dies scheint mir hier so der Fall zu sein.

          Mit einer Klasse "grau" für himmelblaue Schrift kommt wohl niemand gut zurecht. Das scheint mir immer so zu sein.

          LLAP 🖖

          --
          Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
          1. Mit einer Klasse "grau" für himmelblaue Schrift kommt wohl niemand gut zurecht. Das scheint mir immer so zu sein.

            Natürlich nicht. Aber wir reden ja hier nicht von einem bereits professionellen Umfeld, der einen generischen und nachhaltigen Einsatz zum Ziel hat, oder? ^^

            Eine Agentur oder ein Profi, der solche Klassennamen vergeben würde, müsste natürlich vor Scham in den Erdboden versinken. Aber welcher Profi arbeitet noch ohne CSS-Frameworks und ohne CSS-Precompiler?

            1. @@xwolf

              Natürlich nicht. Aber wir reden ja hier nicht von einem bereits professionellen Umfeld, der einen generischen und nachhaltigen Einsatz zum Ziel hat, oder? ^^

              Die Unterscheidung zwischen Profi und Nicht-Profi halte ich an der Stelle für irrelevant. Nicht nur das, sondern für schädlich.

              Etliche Nicht-Profis werden irgendwann zu Profis – mit dem Wissen, das sie als Nicht-Profis erlangt haben. Deshalb halte ich es für zwingend erforderlich, auch Nicht-Profis das bestmögliche Wissen mit auf den Weg zu geben.

              Wenn man sich heute so umschaut, was so alles als Profi arbeitet … Davon haben so einige wohl „Ratschläge“ bekommen, die ausschließlich für Nicht-Profis bestimmt waren.

              Funktioniert nicht. Die nächste Generation von Profis sollte besser ausgestattet sein.

              Aber welcher Profi arbeitet noch ohne CSS-Frameworks

              Ich. Ich kenne mich genügend mit CSS aus, dass ich kein CSS-Framework brauche. Ich kenne mich genügend mit Frameworks aus um zu wissen, wann sie dienlich und wann hinderlich sind.

              und ohne CSS-Precompiler?

              Die soll es auch noch geben.

              LLAP 🖖

              --
              Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
        2. Wenn der Link wirklich ein Link ist, setze doch eine Klasse auf das Listelement

          Aber nicht "grau"! Das ist Unsinn.

          Das Setzen von Klassennamen sollte IMHO so sein, dass derjenige, die sie nutzt damit am Besten zurecht kommt. Dies scheint mir hier so der Fall zu sein.

          100% agree. Und das sowohl im professionellen als auch im nicht professionellen Bereich. Manchmal nervt mich diese Erbsenzählerei hier schon etwas...

          Konni

    2. Hi Wolfgang,

      
      #menu li.grau a {
        color: #ccc;
      }
      

      Ggf. noch ergänzen: li.grau a:active, li.grau a:hover,li.grau a:focus

      Wenn der Link aber garnicht gesetzt wird, also auch kein <a> drumherum ist, dann könnte man sich das sparen und einfach die Farbe des Listelements auf Grau setzen.

      #menu li {
        color: #ccc:
      }
      
      #menu li a {
         color: blue;
      }
      

      Danke Dir sehr. Beide Ansätze haben mir sehr geholfen, css etwas besser zu verstehen. Gunnar hat natürlich recht, wenn er sagt, ein ausgegrauter Link hat nichts im a-tag zu suchen. Trotzdem hilft mir Deine Antwort etwas mehr weiter, weil ich mithilfe Deiner Antwort jetzt sowohl den "dirty-code" zuende schreiben könnte als auch die sauberere Variante.

      Konni

      1. @@Konni

        Gunnar hat natürlich recht, wenn er sagt, ein ausgegrauter Link hat nichts im a-tag zu suchen.

        Sowas hab ich nicht gesagt. Ich habe die Frage gestellt, was ein „ausgegrauter Link“ sein soll.

        Ist es noch ein (funktionierender!) Link, der aus irgendeinem Grund anders dargestellt werden soll als andere Links? Dann sollte sich der Grund für die Andersartigkeit in der Bezeichnung der Klasse wiederfinden, nicht die Darstellung ("grau").

        Oder ist es gar kein Link, sondern ein Menüpunkt, der zwar erscheinen soll, aber nicht verlinkt ist? Auch dann ist ein a-Element durchaus noch angebracht, aber ohne href-Attribut. (Ob das Ding u.a. für Screenreader-Nutzer per Tab angesprungen werden soll (tabindex="0") oder nicht, wäre eine weitere anzustellende Überlegung.) Dann kann man a[href] (künftig auch a:any-link) anders stylen als a. Oder auch die Pseudoklasse :not() verwenden à la a:not([href]).

        Trotzdem hilft mir Deine Antwort etwas mehr weiter, weil ich mithilfe Deiner Antwort jetzt sowohl den "dirty-code" zuende schreiben könnte als auch die sauberere Variante.

        Wie gesagt, dirty war bei xwolf nicht die Klasse an sich, sondern deren Benennung "grau".

        LLAP 🖖

        --
        Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
        1. Hi Gunnar,

          Sowas hab ich nicht gesagt. Ich habe die Frage gestellt, was ein „ausgegrauter Link“ sein soll.

          Ist es noch ein (funktionierender!) Link, der aus irgendeinem Grund anders dargestellt werden soll als andere Links? Dann sollte sich der Grund für die Andersartigkeit in der Bezeichnung der Klasse wiederfinden, nicht die Darstellung ("grau").

          Hm. Ich finde "grau" als Bezeichnung gar nicht so schlecht. Hast Du einen besseren Vorschlag? Achso, Grund für das "ausgrauen" ist, dass der Link (es ist ja ansich keiner, wenn er nicht angeklickt werden kann) als vorhanden angezeigt werden soll, aber es sich dahinter in diesem Fall kein Inhalt befindet. Daher braucht der Link nicht aktiv anklickbar sein, sondern soll "ausgegraut" werden. So weiß der User, dass er dort nicht klicken bracuht.

          Oder ist es gar kein Link, sondern ein Menüpunkt, der zwar erscheinen soll, aber nicht verlinkt ist? Auch dann ist ein a-Element durchaus noch angebracht, aber ohne href-Attribut. (Ob das Ding u.a. für Screenreader-Nutzer per Tab angesprungen werden soll (tabindex="0") oder nicht, wäre eine weitere anzustellende Überlegung.) Dann kann man a[href] (künftig auch a:any-link) anders stylen als a. Oder auch die Pseudoklasse :not() verwenden à la a:not([href]).

          Ich habe m ich für den hreflosen a-tag entschieden.

          Konni

          1. @@Konni

            Hm. Ich finde "grau" als Bezeichnung gar nicht so schlecht.

            Findest du das auch noch, wenn die Nicht-Links nach einer Änderung des Farbschemas nicht mehr grau, sondern himmelblau dargestellt werden?

            Klassen nach der gegenwärtigen(!) Darstellung zu benennen ist immer™ schlecht.

            Hast Du einen besseren Vorschlag?

            "disabled", "kein-link", "no-link", …

            Aber brauchst du ja nicht, da du dich „für den hreflosen a-tag entschieden“ hast. Element.

            der Link (es ist ja ansich keiner, wenn er nicht angeklickt werden kann)

            Dann nenn es auch nicht „Link“.

            LLAP 🖖

            --
            Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
            1. Hi Gunnar,

              Hm. Ich finde "grau" als Bezeichnung gar nicht so schlecht.

              Findest du das auch noch, wenn die Nicht-Links nach einer Änderung des Farbschemas nicht mehr grau, sondern himmelblau dargestellt werden?

              Häh? Warum sollte ich das tun? Und wenn, dann würde ich das im Script machen und eine hellblau-Klasse anlegen.

              Klassen nach der gegenwärtigen(!) Darstellung zu benennen ist immer™ schlecht.

              Sehe ich anders.

              Hast Du einen besseren Vorschlag?

              "disabled", "kein-link", "no-link", …

              Finde ich eher ungeeignet. Ich müsste so immer beim scripten nachschauen, wie die Klasse nochmal ganz genau hieß. So hingegen nehme ich die Farbe, daran erinnere ich mich immer.

              Aber brauchst du ja nicht, da du dich „für den hreflosen a-tag entschieden“ hast. Element.

              der Link (es ist ja ansich keiner, wenn er nicht angeklickt werden kann)

              Dann nenn es auch nicht „Link“.

              Kann es sein, dass hier ziemlich viel "Korinten gekackt" werden?

              Konni

              1. @@Konni

                Kann es sein, dass hier ziemlich viel "Korinten gekackt" werden?

                Für die einen sind’s Korinthen, für die anderen die besten Rosinen der Welt.

                LLAP 🖖

                --
                Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
                1. Für die einen sind’s Korinthen, für die anderen die besten Rosinen der Welt.

                  Ziemlich entlarvende Aussage, findest Du nicht? ;)

                  Aber genau das meinte ich auch, als ich es fragte. Korinthen werden zum Selbstzweck. Aber wenn sie schmecken, dann guten Appetit... ;)

                  Konni

              2. Hallo Konni,

                Hm. Ich finde "grau" als Bezeichnung gar nicht so schlecht.

                Findest du das auch noch, wenn die Nicht-Links nach einer Änderung des Farbschemas nicht mehr grau, sondern himmelblau dargestellt werden?

                Häh? Warum sollte ich das tun? Und wenn, dann würde ich das im Script machen und eine hellblau-Klasse anlegen.

                Es gäbe k „Nicht-Links“

                1. Fall: Klassenbezeichner disabled o.ä
                • genau eine Änderung eines Farbwertes (grayskyblue)
                1. Fall: Klassenbezeichner grau
                • k Änderungen von Klassenbezeichnern in n Dokumenten
                • zuzüglich eine Änderung im CSS, die aber umfangreicher als die Änderung eines Farbwertes

                Klassen nach der gegenwärtigen(!) Darstellung zu benennen ist immer™ schlecht.

                Sehe ich anders.

                Dann solltest du vielleicht deine Sichtweise etwas überdenken. Es sei dir unbenommen, die hier gegebenen Hinweise anzunehmen. Oft sind sie hilfreich.

                Zudem beschreibt das Markup den Inhalt, nicht seine Darstellung. Deshalb ist beispielsweise eine Klasse „Fehler“ immer aussagekräftiger als eine Klasse „rot_und_fett“. Dass es nicht immer einfach ist, solche Klassenbezeichner zu finden, weil man häufig bereits eine bestimmte Darstellung im Kopf hat, steht auf einem anderen Blatt.

                Bis demnächst
                Matthias

                --
                Signaturen sind bloed (Steel) und Markdown ist mächtig.
                1. Hi Matthias,

                  Zudem beschreibt das Markup den Inhalt, nicht seine Darstellung.

                  Das stimmt doch gar nicht! Erinnere Dich mal an die Anfänge des HTML, da war es üblich, sowohl darstellende als auch beschreibende Auszeichnungen im Markup zu benutzen.

                  Deshalb ist beispielsweise eine Klasse „Fehler“ immer aussagekräftiger als eine Klasse „rot_und_fett“. Dass es nicht immer einfach ist, solche Klassenbezeichner zu finden, weil man häufig bereits eine bestimmte Darstellung im Kopf hat, steht auf einem anderen Blatt.

                  Mag sein. Aber man kann auch beides nutzen. Sowohl "Fehler" für Fehler als auch "rot" für ein rotes Wort.

                  Konni

                  1. @@Konni

                    Zudem beschreibt das Markup den Inhalt, nicht seine Darstellung.

                    Das stimmt doch gar nicht! Erinnere Dich mal an die Anfänge des HTML, da war es üblich, sowohl darstellende als auch beschreibende Auszeichnungen im Markup zu benutzen.

                    Am Anfang von HTML waren es rein beschreibende Auszeichnungen.

                    Erst später, als das Web von einer etwas breiteren Masse genutzt und Inhalte für diese erstellt wurden, kam der (durchaus verständliche![1]) Wunsch auf, die Inhalte auch visuell zu gestalten. Dann kamen die darstellungsbezogenen Elemente und Attribute ins HTML.

                    Dann kam CSS. Dann gingen die darstellungsbezogenen Elemente und Attribute wieder – erst in die Transitional- und Frameset-Varianten, mit HTML5 sind sie ganz verschwunden.

                    Aber man kann auch beides nutzen. Sowohl "Fehler" für Fehler als auch "rot" für ein rotes Wort.

                    Dass man beides tun kann, heißt nicht, dass man beides tun sollte.

                    LLAP 🖖

                    --
                    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.

                    1. auch wenn @Der Martin ihn immer noch nicht versteht ;-) ↩︎

  2. @@Konni

    ich möchte in einer Linkliste einige Liks "ausgrauen".

    Warum?

    Die Beantwortung dieser Frage ist essentiell dafür, wie das Markup (HTML) auszusehen hat.

    Wie heißt der Selector

    Das hängt vom Markup ab.

    bzw. das dazugehörige css?

    Das hängt davon ab, was genau du unter „ausgrauen“ verstehst.

    <div id='menue'> <div class='head'>Mein Menue</div>

    Nein, keine div-Suppe bitte.

    Der äußere Container umfasst das Navigationsmenü, soll also ein nav-Element sein.

    Das andere ist eine Überschrift, also ein h#-Element. (Wobei # je nach deiner Überschriftenhierarchie für eine Zahl von 2 bis 6 steht. Also bspw.:

    <nav id="menue">
      <h2>Mein Menü</h2></nav>
    

    „Menü“ natuerlich mit ü.

    <li>normaler Link</li>

    Für einen Link fehlt da aber noch ein a-Element.

    LLAP 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.