Pseudoformate, Definitionen und override

[Christian Eyrich]

Hallo,

Oben in meinem CSS-File ist mit
a:link {color:#BB4400; text-decoration:underline;}
ein allgemeingültiges Layout für Links beschrieben.
Weiter unten mit
a.pic {text-decoration:none; font-weight:bold; color:#000000;}
ein spezielles für Links der Klasse pic.

Für die speziellen Links der Klasse pic wird jetzt nur das Gewicht übernommen, die anderen beiden Attribute nicht.
Ich hatte an sich gehofft, wird bei a kein Pseudoformat angegeben, alle Pseudoformate der Allgemeindefinition überschrieben werden.
Gut, immerhin machen es Opera und Mozilla so, gerade der am häufigsten eingesetzte IE aber nicht.

Welche Angabe sticht jetzt also wirklich, welcher Browser macht's richtig und ist der einzige Ausweg für
den Gestalter leider, auch für die pic-Klasse alle Pseudoformate mit dem gleichen Aussehen zu definieren?

Bye,
Christian

[Sven Rautenberg]

Moin!

Das

a:link {color:#BB4400; text-decoration:underline;}

gilt für noch nicht besuchte Links (und nebenbei gibts noch die Pseudoklassen :visited, :hover, :active und :focus, die du ebenfalls formatieren solltest, oder du formatierst nur a {...}.

Denn das

a.pic {text-decoration:none; font-weight:bold; color:#000000;}

formatiert alle Pseudoklassen. Wenn du Abweichungen von a:link mit Klasse formatieren willst, nimm a.pic:link.

Letztendlich müßtest du für eine vollständige Definition entweder sowas machen:

a { }
a.pic { }

Oder alle Pseudoklassen einzeln aufführen:
a:link
a:visited
a:active
a:hover
a:focus
a.pic:link
a.pic:visited
a.pic:active
a.pic:hover
a.pic:focus

Du kannst auch erst allgemein a formatieren (z.B. Schriftart und -größe, gilt für alle Pseudoklassen), und dann Abweichungen für jede einzelne Pseudoklasse danach um- oder neuformatieren (beispielsweise die Farben).

- Sven Rautenberg

[Christian Eyrich]

Tach auch,

Das

a:link {color:#BB4400; text-decoration:underline;}
gilt für noch nicht besuchte Links (und nebenbei gibts noch die
Pseudoklassen :visited, :hover, :active und :focus, die du
ebenfalls formatieren solltest, oder du formatierst nur a {...}.

Ja, das ist schon klar, das hatte ich mir hier nur gespart. Für allgemeine Links wurden Layouts für alle Pseudoklassen deklariert.

Denn das

a.pic {text-decoration:none; font-weight:bold; color:#000000;}
formatiert alle Pseudoklassen. Wenn du Abweichungen von a:link mit
Klasse formatieren willst, nimm a.pic:link.

Das ist eben die Frage. Überschreibt (lt. Spec) a.pic {...} die in a:link {...} a:hover {...} gemachten Formate für die Klasse pic oder nicht? In der Klasse pic soll die Darstellung für alle Pseudoklassen gleich sein, im IE werden anscheinend nur die Formate aus a.pic {...} übernommen, die nicht schon in explizit in einer der Definitionen der allgemeinen Pseudoklassen auftauchten.

Da ist noch ein verwandtes Problem. Per a:hover ist eine veränderte Hintergrundfarbe definiert die ich in einer anderen Klasse für Links nicht haben möchte. Aktuelle muß ich also a.extlink:hover {background-color:HintergrundfarbeandieserStelle} angeben um den Hover aus der allgemeinen Definition wieder wegzukriegen. Neutralisieren läßt sich die in a:hover gemachte Hintergrundfarbe anscheinend nicht, oder?

Bye,
Christian

[AndreasW]

Moin!

Tach

Das

a:link {color:#BB4400; text-decoration:underline;}
gilt für noch nicht besuchte Links (und nebenbei gibts noch die

a:link gilt für alle Links (d.h. a-Elemente mit href-Attribut)! Nicht nur für unbesuchte.

Pseudoklassen :visited, :hover, :active und :focus, die du ebenfalls formatieren solltest, oder du formatierst nur a {...}.

a { ... } funktioniert alle a-Elemente, also auch solche ohne href-Attribut.

Denn das

a.pic {text-decoration:none; font-weight:bold; color:#000000;}
formatiert alle Pseudoklassen. Wenn du Abweichungen von a:link mit Klasse formatieren willst, nimm a.pic:link.

Letztendlich müßtest du für eine vollständige Definition entweder sowas machen:

a { }
a.pic { }

Oder alle Pseudoklassen einzeln aufführen:
a:link
a:visited
a:active
a:hover
a:focus
a.pic:link
a.pic:visited
a.pic:active
a.pic:hover
a.pic:focus

Die richtige Reihenfolge ist entscheidend. Außerdem (da es inzwischen einen Browser gibt, der :hover... auch auf nicht-Links anwendet).

a:link /* für alle Links */
a:visited /* für alle besuchten Links */
a:link:focus /* für Links, die den Eingabefokus haben */
a:link:hover /* für Links, über denen der Mauszeiger schwebt */
a:link:active /* für Links während des Klickens */

a.pic:link /* für alle Links der class pic */
a.pic:visited /* für alle besuchten Links der class pic */
a.pic:link:focus /* für Links, die den Eingabefokus haben der class pic */
a.pic:link:hover /* für Links, über denen der Mauszeiger schwebt der class pic */
a.pic:link:active /* für Links während des Klickens der class pic */

gibt man das zusätzliche :link nicht an, werden im Mozilla 1.0RC2 nämlich z.B. bei hover auch <a name="blabla">blabla</a>
entsprechend der Regeln bei
a:hover
umformatiert.

Du kannst auch erst allgemein a formatieren (z.B. Schriftart und -größe, gilt für alle Pseudoklassen), und dann Abweichungen für jede einzelne Pseudoklasse danach um- oder neuformatieren (beispielsweise die Farben).

Daß a:link a.pic überlagert, dürfte nur dann passieren, wenn a:link nach a.pic angegeben wird, denn beide haben die selbe Spezifigkeit (0 1 1), und damit muß der letztgenannte gewinnen.
siehe http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

• Sven Rautenberg

Andreas