Symbole für bestimmte Links

[Harald]

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

[Gunnar Bittersmann]

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

[molily]

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

[Harald]

Dazu musst du den Selektor abwandeln, d.h. im konkreten Fall erweitern. Zum Beispiel:

Vielen Dank Mathias, so funktioniert es.
Gruß, Harald

[Gunnar Bittersmann]

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

[molily]

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

[Gunnar Bittersmann]

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

[molily]

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

[Harald]

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