nicht angemeldet
Symbole für bestimmte Links
0 
Gunnar Bittersmann
0 0
Symbole für bestimmte Links
Hallo.
Mit folgendem CSS-Code platziere ich ein Icon rechts neben Links, die auf den Blog verweisen:
a[href^="http://blog.officemanager.de"] {
background: url('http://www.officemanager.de/images/icons/link-blog.png') no-repeat right;
padding-right:15px;
}
In manchen Situationen soll das Icon aber nicht dargestellt werden, beispielsweise in der Tabelle Hauptnavigation auf der Startseite.
Ich habe es mit einer Klasse versucht:
.a_noimg {
background:none;
padding-right:0px;
}
Dies funktioniert aber nicht. Wie kann ich den Style für diese Links bei Bedarf überschreiben?
Herzlichen Dank, Harald
-
@@Harald:
nuqneH
In manchen Situationen soll das Icon aber nicht dargestellt werden, beispielsweise in der Tabelle Hauptnavigation auf der Startseite.
Das „in“ deutet unzweifelhaft auf einen Nachfahrenselektoren hin. [CSS2 §5, http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=SELFHTML]
Ich habe es mit einer Klasse versucht:
Unnötig.
Dies funktioniert aber nicht.
Wegen der Spezifität der Selektoren. [CSS21 §6.4.3*, http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=SELFHTML]
Qapla'
* Hier gab es änderungen in CSS 2.1 gegenüber 2.0. Die deutsche Übersetzung [CSS2 §6.4.3] kann bestenfalls noch zum besseren Verständnis herangezogen werden.
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
Dieser Selektor:
a[href^="http://blog.officemanager.de"]
ist »wichtiger« als
.a_noimg
Daher überschreibt die obige Regel die untere, auch wenn sie ihr nachfolgt.
Du kannst dafür sorgen, dass beide Selektoren zumindest dieselbe http://de.selfhtml.org/css/formate/kaskade.htm#spezifitaet@title=Spezifität (Wichtigkeit) haben, sodass die Regeln gleich gewichtet werden. Dann überschreibt die nachfolgende die vorherige.
Dazu musst du den Selektor abwandeln, d.h. im konkreten Fall erweitern. Zum Beispiel:
a.noimg
Jetzt bestehen beide aus einem Elementselektor und einem Klassenselektor, was dieselbe Spezifität ergibt.
Mathias
-
Dazu musst du den Selektor abwandeln, d.h. im konkreten Fall erweitern. Zum Beispiel:
Vielen Dank Mathias, so funktioniert es.
Gruß, Harald-
@@Harald:
nuqneH
Vielen Dank Mathias, so funktioniert es.
Dennoch ist der Hinweis von molily nicht der beste. (Wo ist der Nicht-hilfreich-Button?
Wie ich sagte, ist die Klasse völlig überflüssig, denn er Nachfahrenselektor führt dich zum Ziel.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Wie ich sagte, ist die Klasse völlig überflüssig, denn er Nachfahrenselektor führt dich zum Ziel.
Du hast recht. Ich hatte mir Haralds Seite angeschaut und irrtümlicherweise vermutet, er wollte nur die verlinkten Icons in der ersten Spalte der Hauptnavigations-Tabelle ohne CSS-Zusatz-Icon. Dann käme man um eine Klasse (auf die eine oder andere Weise) wahrscheinlich nicht herum.
So jedoch kann er schreiben:
.tblliste a[href^="http://blog.officemanager.de"] { background-image: none; padding-right: 0; }Und vielleicht der Hauptnavigation einen eindeutigen Bezeichner wie, sagen wir, id="hauptnavigation" geben.
Mathias
-
@@molily:
nuqneH
Ich hatte mir Haralds Seite angeschaut und irrtümlicherweise vermutet, er wollte nur die verlinkten Icons in der ersten Spalte der Hauptnavigations-Tabelle ohne CSS-Zusatz-Icon.
Auch „in der ersten Spalte“ hört sich sehr nach Einsatz von
:first-child(oder:first-of-type) an.Dann käme man um eine Klasse (auf die eine oder andere Weise) wahrscheinlich nicht herum.
Man braucht keine Klassen für etwas, wofür es schon Pseudoklassen gibt.
So jedoch kann er schreiben: […]
Ja. (Ich präsentiere hier oft nicht die fertige Lösung.)
Und vielleicht der Hauptnavigation einen eindeutigen Bezeichner wie, sagen wir, id="hauptnavigation" geben.
Ja, auch das. Wer weiß, wo die Klasse "tblliste" möglicherweise noch verwendet wird.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Man braucht keine Klassen für etwas, wofür es schon Pseudoklassen gibt.
In dem konkreten Fall ja, allgemein nein. Klassen sind idealerweise semantische Textauszeichnung; Pseudoklassen selektieren aufgrund der gegenwärtigen Position im DOM-Baum. Erstere ändert sich erst, wenn sich der Inhalt ändert; letztere ändert sich schnell, sobald ich bei bleibendem Inhalt das HTML ein wenig umstelle.
Mathias
-
Ich merke schon, dass mein CSS-Wissen ziemlich oberflächlich ist.
Das Icon muss übrigens an mehreren Stellen entfernt werden, beispielsweise rechts in den importierten RSS-Links.
Das habe ich mit#rss a { background:none; padding-right:0px; }realisiert.
Ich war aber auch fast schon wieder soweit, auf das WP-Icon ganz zu verzichten.
Wie dem auch sein, herzlichen Dank für die Tipps, Harald
-
-
-
-
-
-