Unterselector von li

[Konni]

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

[xwolf]

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

[Gunnar Bittersmann]

@@xwolf

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

Aber nicht "grau"! Das ist Unsinn.

LLAP 🖖

[xwolf]

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.

[Gunnar Bittersmann]

@@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 🖖

[xwolf]

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?

[Gunnar Bittersmann]

@@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 🖖

[Konni]

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

[Konni]

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

[Gunnar Bittersmann]

@@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 🖖

[Konni]

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

[Gunnar Bittersmann]

@@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 🖖

[Konni]

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

[Gunnar Bittersmann]

@@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 🖖

[Konni]

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

[Matthias Apsel]

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 (gray → skyblue)

2. 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

[Konni]

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

[Gunnar Bittersmann]

@@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 🖖

---

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

[Gunnar Bittersmann]

@@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 🖖