<a> per CSS mit bestimmten Eigenschaften versehen

[Dugh Dugh]

Guten Abend zusammen!

Ich möchte gerne jedem anchor <a class="more" href…> in einem HTML-Dokument [eigene Kenntniseinschätzung: ganz gut] per externer CSS-Datei bestimmte Eigenschaften zuweisen. Nach meiner bisherigen Ahnung von CSS [in aller Regel erfolgreich] hatte ich gehofft, dass das in etwa so aussehen könnte:

a.more
{
	target:_blank;
	title: "Öffnet einen neuen Tab";
}

Meine intensive Suche im Internet hat leider ergeben, dass es diese Eigenschaften so in CSS nicht gibt und ich konnte leider auch keinen geeigneten Workaround finden.

Die Seite, in der diese Links platziert werden sollen, wird mehr oder weniger täglich um neue Abschnitte mit weiteren Links ergänzt und ich möchte mir einfach das immer wiederkehrende Eintippen der Eigenschaften ersparen. Gibt es hier vielleicht eine elegante z.B. JavaScript-Lösung? [froh, wenn ich den Code nachvollziehen kann]

Herzlich dankbar für jeden Tipp!

Dugh Dugh

[Henry]

Hallo Dugh,

ich möchte mir einfach das immer wiederkehrende Eintippen der Eigenschaften ersparen.

das machst du aber sowieso schon

<a class="more"

da wäre jetzt ein target="_blank" kein großer Extraaufwand zu class="more"

Aber es geht natürlich auch komplett anders, wo du sowohl auf class als auch auf target verzichten kannst. Wie man da bei dir am besten vorgeht, hängt natürlich vom Quelltext an. Kannst du mehr zeigen?

Gruss
Henry

[Dugh Dugh]

Servus Henry,

a.more
{
	color: darkblue;
	text-decoration: none;
	font-style:italic;
}
a.more:hover
{
	color: blue;
}

wird aufgerufen mit <a class="more" ...

Grüße DD

[Gunnar Bittersmann]

@@Dugh Dugh

Was sind das für Links? Stehen sie in einem Menü und sind damit als Links erkennbar?

Oder stehen die Links im Fließtext? Dann ist a.more { color: darkblue; text-decoration: none } verkehrt; Farbe allein reicht nicht, damit Links als solche erkennbar sind. Etliche Menschen können keine Farben erkennen. Links im Fließtext müssen unterstrichen sein.

LLAP 🖖

[Gunnar Bittersmann]

@@Dugh Dugh

a.more
{
	target:_blank;
	title: "Öffnet einen neuen Tab";
}

Das erste S in CSS steht für Style. Wenn es darum ginge, Elementen beliebige Attribute hinzuzufügen, hieße es CAS.

ich möchte mir einfach das immer wiederkehrende Eintippen der Eigenschaften ersparen.

Vielleicht möchtest du den Nutzern das Öffnen der Links in neuern Tabs ersparen? Ob ein Nutzer einen Link im neuen Tabs öffnen möchte, kann sie selbst entscheiden und das ggfs. tun. Ansonsten: was Jakob Nielsen sagt: “Opening up new browser windows is like a vacuum cleaner sales person who starts a visit by emptying an ash tray on the customer's carpet. Don't pollute my screen with any more windows, thanks.”

Und sicher möchtest du den Nutzern nervige Tootips ersparen.

Gibt es hier vielleicht eine elegante z.B. JavaScript-Lösung?

Mit document.querySelectorAll('.more') erhältst du eine Collection der betreffenden Links, durch die du iterieren und den Elementen mit setAttribute] Attribute verpassen kannst.

LLAP 🖖

[Dugh Dugh]

@LLAP

Hallo, erst mal herzlichen Dank für den document... Tipp, den ich mir sehr genau anschauen werde. Je weniger wiederholtes Getippe, desto besser.

Der Hinweis auf CSS statt CAS klingt im ersten Moment überzeugend. Wie asst das dann mit CSS-Eigenschaften wie floating, animation, usw.?

Deine Meinung zum Thema "jeweils neuer Tab" betrifft, lass mich nur soweit kommentieren. Ich halte es für eine Unart in Foren, aus der eigenen Arbeits-, Angebots- und Besucher-Umgebung anderen mehr oder weniger Vorschriften mit "allgemeinen Regeln" zu machen, ohne die im problematischen Bereich gegebene überhaupt zu kennen.

In meinem Projekt werden mit den Links Texte aufgerufen, die von der Länge her jeden Rahmen eines iFrames sprengen und durch den Aufruf im selben Tab den Zugriff auf die vorherige Übersicht, die auch zum Vergeich verschiedener Texte einlädt, unmöglich macht.

Schöne Grüße DD