Marc: Erklärt mir bitte den Code

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.

--
Und immer schön
validieren (http://validator.w3.org/)
  1. 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

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

      --
      Und immer schön
      validieren (http://validator.w3.org/)
      1. @@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'

        --
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        1. 'a'-Elemente mit @href sind Links.

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

      2. 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> :)
        
        1. 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/>)
          
          1. @@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'

            --
            Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
            1. @@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'

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

                @@Gunnar Bittersmann:

                nuqneH

                CSS-Expression.

                Danke Euch beiden!

                Viele Grüße,
                Marc.

                --
                Und immer schön
                validieren (http://validator.w3.org/)
              2. @@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)
                
                1. 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.

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

                    --
                    Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                    1. 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

                      1. @@suit:

                        nuqneH

                        aber die abweichende Unterstreichungsfarbe ist etwas Sinnfrei :D

                        ?? Was genau meinst du?

                        Qapla'

                        --
                        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
                        1. aber die abweichende Unterstreichungsfarbe ist etwas Sinnfrei :D

                          nvm - Falscher Thread :p

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