CSS: ID darf nur nur EIN Mal pro Seite vorkommen?

Hallo,
in meinem Theme habe ich festgelegt, dass Links im Hauptcontent blau gefärbt dargestellt werden. Leider erfasst das auch Anker-Links, die vom Inhaltsverzeichnis zum betreffenden Abschnitt nach unten, genauer gesagt zur betreff. H2 führen. Des weiteren ebenfalls blau werden die "nach-oben"-Links, die den besucher am Ende des Abschnitts wieder nach oben führen.

Also z.B. wenn eine Seite drei große Abschnitte hat, dann gibt es insgesamt 3 x 2 = 6 seiteninterne Links, die wie "normale" interne oder externe Links blau dargestellt werden. Sie sollten aber schwarz bleiben, wie normaler Text.

Sieht auf einer Seite dann in etwa so aus:



(drei mal)

In meinem eigenen "custom"-Stylesheet scheint das "color: black" nur per ID zu funktionieren. Klassen scheinen hierarchisch nicht zu genügen, weder im ol, li, p noch a.

Da eine ID nur ein Mal pro Seite vorkommen sollte, wäre das aber nicht valide (obwohl die Browser offenbar alle IDs korrekt anzeigen). Ganz generell versuche ich im Zweifelsfall lieber Klassen zu verwenden.

Gibt's "schlaue" Alternativen zur ID?

Alternative zu Id (die eindeutig sein muss, also einzigartig) ist nunmal die klasse.
Wenn dein Stylesheet nicht greift hast du einen Fehler, es wird zur falschen zeit geladen, oder ein anderes CSS überschreibt deinen Wert.

Warum machst du nicht einen eigene Klasse und gibst die zusätzlich deinen Elementen mit?

Hallo

richtig, bei Style Cheets die mehrmals genutzt werden, solltest du statt "id" lieber "class" nutzen.

Dafür musst du dein CSS Cheet wie folgt anpassen.

CSS

statt #toc-ueb (ID) dann .toc-ueb (class)

HTML

statt <li id="toc-ueb"> dann <li class="toc-ueb">

Deine Code kannst du auch mit:

http://validator.w3.org/

und

https://jigsaw.w3.org/css-validator/

überprüfen.

Mit freundlichen Grüßen

Martin Krüger

Klassen hatte ich schon probiert, mit und ohne Elementname vorne dran im Stylesheet. Alles, was an Elementen in Frage kommt, habe ich eine entsprechende Klasse gegeben, aber es hat nicht gegriffen: ol, li, a und dem p beim "nach-oben-Link.

Da ich auf diesem Wege zwar nicht die schwarze Textfarbe zurückbekam, aber per toc-ueb-Klasse z.B. ein bold möglich war und das "spezifischere" bzw. gewichtigere ID klappt, bin ich davon ausgegangen, dass es an der CSS-Hierarchie liegt.
Das an anderer Stelle erfolgte Styling, dass Links im Contentblock blau sein sollen, lässt sich nicht overrulen - war meine Vermutung.

Was genau heißt denn "eine best. ID darf nur ein Mal pro Seite vorkommen"? Dass eine ID nur für ein bestimmtes Element wie z.B. einem < a > nur ein Mal vorkommen darf UND genau dieses Element mit seiner ID auch nur ein Mal oder darf derselbe a-Tag samt Klasse mehrfach vorkommen? Aber halt nicht noch in einem zweiten Element, z.B. einem span.

Martinus33 schrieb:

Klassen hatte ich schon probiert, mit und ohne Elementname vorne dran im Stylesheet. Alles, was an Elementen in Frage kommt, habe ich eine entsprechende Klasse gegeben, aber es hat nicht gegriffen: ol, li, a und dem p beim "nach-oben-Link.

Zum Vergrößern anklicken....

Und was hat dich bisher daran gehindert, dem Problem einfach direkt auf den Grund zu gehen? Rechtsklick => Element untersuchen... das ist ja wohl absolute Grundlage & Urschleim.
Schau dir an, welche Rules greifen! Lies nach, wie Selektoren gewichtet werden! Du hast's hier noch einfach, zumindest kam nicht irgend ein Vollpfosten auf die Idee, mit Inline-Styles zu arbeiten... oder noch schlimmer, mit !important. Schau also nach, welche Spezifizität die Selektoren haben müssen, damit sie greifen... und stell im Zweifel dein CSS um. Reihenfolge spielt eine Rolle.

Was genau heißt denn "eine best. ID darf nur ein Mal pro Seite vorkommen"? Dass eine ID nur für ein bestimmtes Element wie z.B. einem < a > nur ein Mal vorkommen darf UND genau dieses Element mit seiner ID auch nur ein Mal oder darf derselbe a-Tag samt Klasse mehrfach vorkommen? Aber halt nicht noch in einem zweiten Element, z.B. einem span.

Zum Vergrößern anklicken....

Eine ID ist eindeutig. Absolut und endgültig eindeutig. Alles andere wäre doch wohl auch bescheuert, oder? Stell dir einfach vor, sie wäre der PK einer Datenbank-Tabelle.

Ich habe es jetzt doch noch hinbekommen, die Ankerlinks (und nur diese) im Hauptcontentbereich mittels Klassen wie normalen Text schwarz zu machen. Die "normalen" Links sind blau.

Macht es eigentlich irgendeinen Unterschied, ob ich die anvisierten Ankerlinks per
a.schwarz oder
a.schwarz:link
in meinem Stylesheet schwarz färbe?

Falls das zunächst mal das absolut Gleiche ist, könnte es evtl. einen Unterschied machen im Hinblick auf das Wirken anderer Link-states? Die hängen ja voneinander ab und ich habe vor, so ziemlich alle states zu nutzen.

Martinus33 schrieb:

Macht es eigentlich irgendeinen Unterschied, ob ich die anvisierten Ankerlinks per
a.schwarz oder
a.schwarz:link
in meinem Stylesheet schwarz färbe?

Zum Vergrößern anklicken....

Ja, natürlich. Element.Class:State hat offensichtlich eine höhere Spezifizität als Element.Class

Falls das zunächst mal das absolut Gleiche ist, könnte es evtl. einen Unterschied machen im Hinblick auf das Wirken anderer Link-states?

Zum Vergrößern anklicken....

Natürlich. Und auch dafür gibt es Standard-Antworten in der Standard-Lektüre, in welcher Reihenfolge man Link-States deklarieren soll....

Die höhere Spezifität wäre interessant, wenn die Formatierung an der CSS-Hierarchie bei a.link knapp scheitern würde. Es klappt aber mit beidem.

Apropos Reihenfolge (link, visited, hover, focus, active), ich vermute, diese wird komplett für alle states vermutlich in EINEM stylesheet erledigt werden müssen? Wenn z.B. drei dieser states in Design-Features des Themes erledigt werden können und die übrigen zwei im custom stylesheet, dann wird man wohl freiwillig alle gemeinsam im custom stylesheet machen müssen und auf das stylen per Theme-Design-Features verzichten müssen, oder?

Ich würd den Kram GAR NICHT separat stylen. In der Praxis braucht man eigentlich nur a und a:hover. Der Rest ist Banane. Mir ist noch keine sinnvolle Anwendung für :visited unter gekommen. :focus könnte noch grenzwertig nützlich sein, wenn man Tastatur-Navigation im großen Stil fördern will.

focus, hover und active wird oft als Trio gemeinsam empfohlen, wenn man Touchscreens und screenreader einbeziehen will. Für Mobil-User soll es zumindest eine "Hilfe" sein.

Zum Beispiel hier: https://developers.google.com/web/fundamentals/input/touch/activestates/

Ich vermute mal, die besseren Themes bieten zwar meist states in ihren features an, aber selten mehr als zwei oder drei. Wer konsequent alle oder fast alle umsetzen will, der muss letztlich dann doch alle an einer Stelle manuell coden, wegen der Reihenfolge.

Auf zwei oder drei CSS-sheets verteilt, wird das mit der Reihenfolge wohl nichts werden. Sieht zumindest bei mir so aus. Haben andere dazu Erfahrung? Keiner hier, der sagt, ich mach gleich (fast) alle states?