Erklärt mir bitte den Code

[Marc]

Hallo zusammen,

mit dem folgenden Code selektiere ich Links. Es dient mir dazu, im Ausdruck einer Webseite die Linkadressen auszugeben (mit content: " ("attr(href)")";). Allerdings habe ich den Selektor nicht selber geschrieben und obwohl er funktioniert, bin ich doch nicht zufrieden, bis ich ihn verstehe. :-)

Hier das geheimnisvolle Stück:
a:not([href^= '#']):after

Viele Grüße,
Marc.

[Cheatah]

Hi,

Allerdings habe ich den Selektor nicht selber geschrieben und obwohl er funktioniert, bin ich doch nicht zufrieden, bis ich ihn verstehe. :-)

na sowas, dabei ist er doch absolut menschenlesbarer Klartext ;-)

a:not([href^= '#']):after

Jedes <a>-Element, auf das _nicht_ zutrifft, dass das href-Attribut mit '#' beginnt, verwende auf dessen anschließendes Pseudo-Element die nun folgende Deklaration.

:not() ist ein negierender Selektor, das was darin steht darf _nicht_ zutreffen.

[attr] ist ein Attributselektor.

[attr^=value] vergleicht den Beginn des Attributwertes.

:after ist ein Pseudo-Element, welches am Ende (und innerhalb) des selektierten Elements vorliegt.

Cheatah

[Marc]

Hallo zusammen,

vielen Dank Euch allen, nun ist das geklärt. :not habe ich nicht gefunden, und das Dach (^) war mir nicht obwohl ich es vor einer Weile mal gelesen hatte. Das heißt, wenn ich nur externe Links ausgeben will, würde mir so etwas helfen:

  
a[href^= 'http']:after,  
a[href^= 'ftp']:after  
 

Oder braucht man dann so etwas wie

  
a:link([href^= 'http']):after,  
a:link([href^= 'ftp']):after  
 

???

Ach ich probier es einfach uas und melde mich, ob es geklappt hat. - Sonst habe ich ja jetzt die Stelle in den Standards, wo ich weiter lesen kann. Nochmal Danke!

Viele Grüße,
Marc.

[Gunnar Bittersmann]

@@Marc:

nuqneH

wenn ich nur externe Links ausgeben will, würde mir so etwas helfen:
a[href^= 'http']:after,
a[href^= 'ftp']:after

'a'-Elemente mit @href sind Links.

Oder braucht man dann so etwas wie
a:link([href^= 'http']):after,
a:link([href^= 'ftp']):after

Die Pseudoklasse ':link' [CSS2 §5.11.2] ist SEHR DUMM benannt. So dumm, dass man dem, der das war, die Ohren langziehen müsste.

Qapla'

[suit]

'a'-Elemente mit @href sind Links.

Du vergisst die <a href="javascript:helden()">Links</a> :p

[suit]

Das heißt, wenn ich nur externe Links ausgeben will, würde mir so etwas helfen:

a[href^= 'http']:after,
a[href^= 'ftp']:after

  
Wie unterscheidest du: `<a href="http://meineseite.example.com/">foo</a>`{:.language-html} und `<a href="http://andereseite.example.com/">bar</a>`{:.language-html} sowie <a href="ftp-verzeichnis/foo.zip">Datei downloaden</a> :)

[Marc]

Hallo,

Das heißt, wenn ich nur externe Links ausgeben will, würde mir so etwas helfen:

a[href^= 'http']:after,
a[href^= 'ftp']:after

>   
> Wie unterscheidest du: `<a href="http://meineseite.example.com/">foo</a>`{:.language-html} und `<a href="http://andereseite.example.com/">bar</a>`{:.language-html} sowie <a href="ftp-verzeichnis/foo.zip">Datei downloaden</a> :)  
  
Brauche ich nicht: die von mir verwendeten CMSe (typo3 und redaxo) setzen vor interne Links kein http://www.meineseite.de und wenn ich was von Hand mache, nutze ich eh nur relative Pfadangaben. Einen File-Server habe ich nicht.  
  
Dennoch ist mir noch ein Licht aufgegangen. Interne Links auf Seiten möchte ich nicht unbedingt angeben, weil eine Adresse wie ../kontakt.htm wohl zu viele Menschen überfordern würde, selbst wenn sie die Adresse des aktuellen Dokumentes mit ausdrucken (IMHO default bei denmeisten Browsern).  
  
Aber vielleicht gebe ich dann zukünftig alle Adressen auf downloadbare Dateien absolut an, damit jemand weiß, wo man die im Text genannten Dateien herunterladen kann. Konventionen (zur not mit sich selber verhandelt) sind alles im Leben. :-)  
  
Übrigens: mir ist klar, dass der IE (offenbar bis einschließlich IE8) damit nichts anzufangen weiß. Naja, wen wunderts...  
  
Kennt jemand einen Workaround?  
  
Viele Grüße,  
Marc.

-- 
Und immer schön  
validieren (<http://validator.w3.org/>)

[Gunnar Bittersmann]

@@Marc:

nuqneH

Übrigens: mir ist klar, dass der IE (offenbar bis einschließlich IE8) damit nichts anzufangen weiß. Naja, wen wunderts...

Der 8er kann’s.

Kennt jemand einen Workaround?

CSS-Expression.

Qapla'

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

CSS-Expression.

a { zoom: expression( [code lang=javascript](new Function('elem', 'elem.innerHTML += " (" + elem.href + ")"; elem.style.zoom = 1;'))(this) ); }[/code]

Oder gar

a { zoom: expression( [code lang=javascript](new Function('elem', 'elem.innerHTML += (" (" + elem.href + ")").small(); elem.style.zoom = 1;'))(this) ); }[/code]

Das wäre das erste Mal, dass ich der JavaScript-Methode small() einen Sinn zuspräche.

Statt 'zoom' kann auch eine andere Eigenschaft herhalten.

Qapla'

[Marc]

Hallo,

@@Gunnar Bittersmann:

nuqneH

CSS-Expression.

Danke Euch beiden!

Viele Grüße,
Marc.

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Statt 'zoom' kann auch eine andere Eigenschaft herhalten.

'color' bietet sich an, da IE < 8 den Wert "inherit" nicht interpretiert und man auch da mit JavaScript nachhelfen muss.

Das Ganze sieht dann so aus:

@media print  
{  
  a  
  {  
    color: inherit;  
    color: expression( [code lang=javascript](new Function('elem', 'elem.innerHTML += (" (" + elem.href + ")").small(); elem.style.color = elem.parentNode.currentStyle.color;'))(this)
~~~ );  
    text-decoration: none;  
  }  
  
  a:after  
  {  
    content: " (" attr(href) ")";  
    font-size: 0.8em;  
  }  
}[/code]  
  
Qapla'

-- 
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)

[suit]

Gib' Gunnar ein Blatt Papier mit beidseitiger "Bitte wenden"-Aufschrift[1] und er beschäftigt sich (stunden|tage)lang.

[1] ein hingeworfener Denkanstoss bzw. eine nicht unbedingt praxisorientierte Idee.

[Gunnar Bittersmann]

@@suit:

nuqneH

Gib' Gunnar ein Blatt Papier mit beidseitiger "Bitte wenden"-Aufschrift[1] und er beschäftigt sich (stunden|tage)lang.

*G*

[1] ein hingeworfener Denkanstoss bzw. eine nicht unbedingt praxisorientierte Idee.

Beim Ausdruck den URI mit auszugeben (und den Linktitel dafür nicht farblich hervorzuheben), find ich schon praxisorientiert. Hab ich auch so in meinem Nutzerstylesheet.

Viele andere vermutlich nicht, weshalb man es durchaus ins Autorenstylesheet einbauen kann. Und wenn’s denn auch eine Lösung für IE < 8 gibt …

Qapla'

[suit]

Beim Ausdruck den URI mit auszugeben (und den Linktitel dafür nicht farblich hervorzuheben), find ich schon praxisorientiert. Hab ich auch so in meinem Nutzerstylesheet.

Natürlich - aber die abweichende Unterstreichungsfarbe ist etwas Sinnfrei :D

[Gunnar Bittersmann]

@@suit:

nuqneH

aber die abweichende Unterstreichungsfarbe ist etwas Sinnfrei :D

?? Was genau meinst du?

Qapla'

[suit]

aber die abweichende Unterstreichungsfarbe ist etwas Sinnfrei :D

nvm - Falscher Thread :p

[jobo]

Hallo,

idee:

Hier das geheimnisvolle Stück:
a:not([href^= '#']):after

Anker:nicht href gleich Raute (was aber macht das Circumflex?):dahinter

Also sinngemäß: wenn ein Anker als Href nicht Raute hat, dann schreib das folgende dahinter.

Gruß

jobo

[suit]

was aber macht das Circumflex?

http://www.w3.org/TR/2009/PR-css3-selectors-20091215/#attribute-substrings