nicht angemeldet
Klasse zusammen mit Pseudo-Klasse verwenden
0 0 0 
Der Martin
0 0 0 Der Martin
0 0 0 Der Martin
Klasse zusammen mit Pseudo-Klasse verwenden
Gunnar BittersmannHi
Wenn man Pseudoklasse auf Selektoren einer bestimmten Klasse anwenden will, sollte die Reihenfolge ja so lauten:
[selektor][Klasse][Pseudo-Klasse]
Beispiel:
a.foo:before {
content: url(path/bar.gif);
}
'bar.gif' ercheint brav vor dem link. Bei:
a.bar:link, a.bar:visited, a.bar:focus, a.bar:hover, a.bar:active {
color: #666666;
}
erscheinen die buttons allersings nicht in dem gewünschten grau. Bei:
.bar a:link, .bar a:visited, .bar a:focus, .bar a:hover, .bar a:active {
color: #666666;
}
allerdings schon. Mache ich einen Fehler oder gibt es bei den Pseudoklassen :link :visited :focus : hover :active und :before :after einen Unterschied?
Danke & Gruß
AirMax
-
Hi,
Mache ich einen Fehler oder gibt es bei den Pseudoklassen :link :visited :focus : hover :active und :before :after einen Unterschied?
Du selektierst schlicht und ergreifend völlig unterschiedliche Dinge - und zwar unabhängig von den Pseudoklassen. Der Selektor "a.bar" selektiert jedes <a>-Element, welches über die Klasse "bar" verfügt; ".bar a" selektiert jedes <a>-Element, welches sich innerhalb eines Elementes mit der Klasse "bar" befindet.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
Du selektierst schlicht und ergreifend völlig unterschiedliche Dinge - und zwar unabhängig von den Pseudoklassen. Der Selektor "a.bar" selektiert jedes <a>-Element, welches über die Klasse "bar" verfügt; ".bar a" selektiert jedes <a>-Element, welches sich innerhalb eines Elementes mit der Klasse "bar" befindet.
Danke für Deine Antwort.
Das ist zwar ein kleiner, aber feiner Unterschied. Würde das heißen, dass bei ".bar a:Pseudo-Klasse" die Pseudo-Klasse auch angewendet wird, wenn wenn <a> einer ganz anderen Klasse angehören würde aber innerhalb eines Elementes mit der Klasse "bar" wäre?-
Hallo,
Würde das heißen, dass bei ".bar a:Pseudo-Klasse" die Pseudo-Klasse auch angewendet wird, wenn wenn <a> einer ganz anderen Klasse angehören würde aber innerhalb eines Elementes mit der Klasse "bar" wäre?
kompliziert formuliert, aber ja, die Annahme ist richtig.
So long,
Martin--
Früher habe ich mich vor der Arbeit gedrückt, heute könnte ich stundenlang zusehen.
-
kompliziert formuliert, ...
äähhh...stimmt :)
Hab' gerade noch ein anderes kleines Problem entdeckt. Die Ausgabe des PHP-Skripts ist:
print str_repeat(" ", 6) . '<a class="download" href="test.jpg">test.jpg</a>' . "\r\n";und das CSS für die Pseudoklasse:
a.download:before { content: url(path/foo.gif)" "; }Alles klappt wunderbar. Wenn ich mit der "Patsche-Hand" auf den Link gehe, merke ich allerdings, dass sich (ich nenne es mal) die verweissensitive Fläche auch auf die Grafik vor dem Link ausstreckt. Kann mir jemand ein Schlagwort nennen, wie ich definieren kann, dass sich die verweissensitive Fläche nur auf den Text 'test.jpg' reduziert?
Danke & Gruß
AirMax-
Hi,
Hab' gerade noch ein anderes kleines Problem entdeckt. Die Ausgabe des PHP-Skripts ist:
Das ist *nicht* die Ausgabe, sondern der PHP-Code.
Wenn es um clientseitige Probleme geht, dann zeige bitte immer den Code, den der Client erhält.a.download:before {
content: url(path/foo.gif)" ";
}> > Alles klappt wunderbar. Wenn ich mit der "Patsche-Hand" auf den Link gehe, merke ich allerdings, dass sich (ich nenne es mal) die verweissensitive Fläche auch auf die Grafik vor dem Link ausstreckt. Kann mir jemand ein Schlagwort nennen, wie ich definieren kann, dass sich die verweissensitive Fläche nur auf den Text 'test.jpg' reduziert? Mit der Methode - gar nicht. :before und content bewirken, dass der Inhalt \*innerhalb\* des Elements eingefügt wird. Das ist also so, als hättest du im HTML direkt `<a href="..."><img src="..." ...>Linktext</a>`{:.language-html} hingeschrieben - und damit gehört das Bild natürlich mit zum Link. Aber warum sollte man überhaupt wollen, dass es \*nicht\* dazugehört? Als Nutzer \*erwarte\* ich eigentlich, dass ich auch auf das Icon/Bild/wasauchimmer vor dem Linktext klicken kann. MfG ChrisB -- “Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]-
Hi ChrisB,
danke für Deine Tipps.
Rest siehe Antwort zu Matrin's Post.gruß
-
-
Hi,
a.download:before {
content: url(path/foo.gif)" ";
}> Alles klappt wunderbar. Wenn ich mit der "Patsche-Hand" auf den Link gehe, merke ich allerdings, dass sich (ich nenne es mal) die verweissensitive Fläche auch auf die Grafik vor dem Link ausstreckt. Kann mir jemand ein Schlagwort nennen, wie ich definieren kann, dass sich die verweissensitive Fläche nur auf den Text 'test.jpg' reduziert? nein - aber kannst du mir einen Grund nennen, warum du hier die Pseudoklasse :before in Verbindung mit der CSS-Eigenschaft content verwendest? Du erreichst damit vielleicht das gewünschte Ergebnis - aber auch, dass ältere Browser das Ganze ignorieren, weil sie :before nicht kennen. Ich würde stattdessen empfehlen: ~~~css a.download { padding-left: 20px; /* an die Breite der Grafik anpassen */ background-image: url(foo.gif) left no-repeat; }Das kann sogar schon ein IE5, und es hätte den gleichen Effekt.
Ich empfinde es übrigens als Vorteil, dass die Grafik mit zur klickbaren Fläche gehört ...So long,
Martin--
Rizinus hat sich angeblich als sehr gutes Mittel gegen Husten bewährt.
-
Hi Martin,
... aber kannst du mir einen Grund nennen, warum du hier die Pseudoklasse :before in Verbindung mit der CSS-Eigenschaft content verwendest? Du erreichst damit vielleicht das gewünschte Ergebnis - aber auch, dass ältere Browser das Ganze ignorieren, weil sie :before nicht kennen.
Ja, das war mir bewusst. Hatte auch schon überlegt später eine Browserweiche fürs CSS einzubauen.
Ich empfinde es übrigens als Vorteil, dass die Grafik mit zur klickbaren Fläche gehört ...
Dann bist Du, neben ChrisB, schon der zweite, der das so sieht. Vielleicht sollte ich es dann doch so lassen. Stören tut's ja nicht wirklich.
Gruß
-
Hi,
nur damit sich hier keine falsche Terminologie festsetzt:
[...] die Pseudoklasse :before [...]
:before ist ein Pseudo-Element, keine Pseudo-Klasse.
Ich empfinde es übrigens als Vorteil, dass die Grafik mit zur klickbaren Fläche gehört ...
Dito, es entspricht meinen Erwartungen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi Cheatah,
nur damit sich hier keine falsche Terminologie festsetzt:
[...] die Pseudoklasse :before [...]
:before ist ein Pseudo-Element, keine Pseudo-Klasse.stimmt, danke für die Korrektur.
Unfassbar, wo war ich mit meinen Gedanken?So long,
Martin--
Mit einem freundlichen Wort und einer Waffe erreicht man mehr, als mit einem freundlichen Wort allein.
(Al Capone, amerikanische Gangsterlegende)
-
Moin!
Unfassbar, wo war ich mit meinen Gedanken?
*dramatische Musik* saemtliche psychopathischen Praeriehunde, Lolcats und Forenteilnehmer - nein, die komplette Internetgemeinde starrt entsetzt auf Martin. Es ist Un-fassbar!
Tief enttaeuscht wende ich mich wieder meiner Arbeit zu. Ein Held ist gefallen. Das Leben geht weiter.
;)
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett-
@@Steel:
nuqneH
Ein Held ist gefallen.
Na zum Glück kein Sack Reis.
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)-
Hoi!
Ein Held ist gefallen.
Na zum Glück kein Sack Reis.
Den hab ich heimlich wieder hingestellt. Hat keiner gemerkt. ;)
--
"Die Diebesgilde beklagte sich darueber, dass Mumm in aller Oeffentlichkeit behauptet hatte, hinter den meisten Diebstaehlen steckten Diebe."
- T. Pratchett
-
-
-
-
-
-
-
-
-