bari: css Attributselektoren Teiluebereinstimmung

Guten Abend nochmals,
Ich habe 2 Fragen zu Attributselektoren.

  1. gibt es eine Möglichkeit href, die auf interne Seiten und Orte (Anker) auch als Ganzübereinstimmung per Attributselektor aufzurufen? Oder kann ich das nicht mit href machen?

Ich habe mehrere href zu formatieren (sprachlinks, Ankerlinks und einen top-link).
Der top-link (href="#") steht zuhinterst im css. Nun passiert es, dass mit nachfolgender Formatierung für a[href*="#"] auch die vorhergehenden a[href^=#slide-show"] betroffen sind, resp umformatiert werden (da sie wohl auch ein # enthalten). Deshalb suchte ich nach einer Möglichkeit einer Ganzübereinstimmung für href.

2. Das ist die Formatierung für den top-link

  
a[href*="#"]:link, a[href*="#"]:visited {  
 font-size: .7em;  
 text-decoration: none;  
 background-color: yellow;  
 padding: .1em .5em;  
 border: 1px solid red;  
 border-radius: 1px;  
 color: black;  
 } /**/  
a[href*="#"]:hover, a[href*="#"]:focus {  
 background-color: #999999;  
 border: 1px solid blue;  
 color: white;  
 }  

Muss man gleiche Formatierungen zwichen link+visited bei mir als 1. Teil, und hover+focus als 2. Teil wiederholen oder kann man die weglassen, resp muss man nur sich ändernde Formatierungselemente (bezüglich link+visited) bei hover+focus schreiben? Ich meine, dass es so funktioniert hat, bin mir aber nicht sicher (auch weil ich die Teilübereinstimmung der href nicht ganz im Griff habe).

Danke,
bari.

  1. Halo bari

    1. gibt es eine Möglichkeit href, die auf interne Seiten und Orte (Anker) auch als Ganzübereinstimmung per Attributselektor aufzurufen? Oder kann ich das nicht mit href machen?
    a[href*='#'] {color: Blue;}  
    a[href^='#'] {color: Green;}  
    a[href='#slide-show'] {color: Red;}
    
    <p><a href="#slide-show">test</a></p>  
    <p><a href="#test">test</a></p>  
    <p><a href="./test.html#test">test</a></p>
    

    Ganzübereinstimmung = a[href='#slide-show']

    gerne qx

    1. Muss man gleiche Formatierungen zwichen link+visited bei mir als 1. Teil, und hover+focus als 2. Teil wiederholen oder kann man die weglassen, resp muss man nur sich ändernde Formatierungselemente (bezüglich link+visited) bei hover+focus schreiben? Ich meine, dass es so funktioniert hat, bin mir aber nicht sicher (auch weil ich die Teilübereinstimmung der href nicht ganz im Griff habe).

      Wenn link+visited gleich formatiert sind kannst du sie weglassen;
      ein einfaches a[xyz='#'] {color: DarkBlue} genügt.
      Mit hover+focus erreichst du unterschiedliche Ereignisse.

      hover = mousover (¿touchover?)
      focus = click und barrierefreies durchtabben

      a[href*="#"]:hover {color: Orange;}  
      a[href*="#"]:focus {color: Pink;}
      
      1. Hallo qx
        Besten Dand für deine Erklärung.

        Wenn link+visited gleich formatiert sind kannst du sie weglassen;
        ein einfaches a[xyz='#'] {color: DarkBlue} genügt.
        Mit hover+focus erreichst du unterschiedliche Ereignisse.

        hover = mousover (¿touchover?)
        focus = click und barrierefreies durchtabben

        a[href*="#"]:hover {color: Orange;}

        a[href*="#"]:focus {color: Pink;}

          
        ich möchte eigentlich focus und hover zusammenfassen, da es m.E. keinen Unterschied macht, ob ich mit der Maus oder mit dem Tab-Funktion die links anklicke. Die Absicht des Benützers ist ja dieselbe, oder übersehe ich da etwas?  
        (Deshalb lasse ich auch active weg, da ein link ja nur solange z.b. bold bleibt, wie ich mit der Maus 1/2 Klick mache, sobald ich den Klick wieder loslasse verliert der link die active-Formatierung.)  
          
        Bei mir sieht das dann so aus:  
        ~~~css
          
        .anker a[href*="slide-show"]:link {  
         font-size: .7em;  
         text-decoration: none;  
         background-color: yellow;  
         padding: .1em .5em;  
         border: 1px solid red;  
         border-radius: 1px;  
         color: black;  
         }  
          
         .anker a[href*="slide-show"]:visited {  
         border: 1px solid blue;  
         color: #8470FF;  
         } /*8470FF=lightslateblue*/  
          
        .anker a[href*="slide-show"]:focus,.mypictures .anker li a[href*="slide-show"]:hover {  
         background-color: #999999;  
         border: 1px solid blue;  
        color: white;  
         }  
        
        

        d.h. im a link habe ich die vollständige Formatierung angegeben und bei visited und focus+hover nur das, was sich ändern soll.

        Gruss,
        bari.

        1. @@bari:

          nuqneH

          color: #8470FF;
          } /*8470FF=lightslateblue*/

          Wozu der Kommentar? Und wenn, dann gehört er in die entspechende Zeile:

          color: #8470FF; /*lightslateblue*/
          }

          d.h. im a link habe ich die vollständige Formatierung angegeben

          Nein, du bist den Machern der CSS-Spec auf den Leim gegangen. :link gilt nicht für alle Links.

          und bei visited und focus+hover nur das, was sich ändern soll.

          Dann solltest du nicht border: 1px solid blue angeben, sondern border-color: blue, denn border-width und border-style ändern sich ja nicht.

          Aber wie gesagt, wirst du bei :visited nicht unbedingt Erfolg haben.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        2. @@bari:

          nuqneH

          .anker a[href*="slide-show"]:focus,.mypictures .anker li a[href*="slide-show"]:hover {

          Warum ist bei :hover .mypictures und li mit im Selektor? Beides sollte – wie bei :focus – nicht drin sein. Selektoren so kurz wie möglich halten!

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. @@Quincunx:

        nuqneH

        Wenn link+visited gleich formatiert sind kannst du sie weglassen;

        Kann man wohl sowieso, weil Browser sie aus Privatsphäregründen eh gleich formatieren.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
    2. Halo bari

      1. gibt es eine Möglichkeit href, die auf interne Seiten und Orte (Anker) auch als Ganzübereinstimmung per Attributselektor aufzurufen? Oder kann ich das nicht mit href machen?

      a[href*='#'] {color: Blue;}

      a[href^='#'] {color: Green;}
      a[href='#slide-show'] {color: Red;}

      
      >   
      > ~~~html
      
      <p><a href="#slide-show">test</a></p>  
      
      > <p><a href="#test">test</a></p>  
      > <p><a href="./test.html#test">test</a></p>
      
      

      Ganzübereinstimmung = a[href='#slide-show']

      Danke. ja, klappt. war vielleicht zu trivial.
      aber da es auf der Seite css/Selektoren/Attributselektoren/Teilübereinstimmung nicht erwähnt ist (es hat "nur" die 3 Varianten: a[href^..., a[href$... und a[href*...) und es eine Seite zuvor ein Kapitel "css/selektoren/Attributselektor/Wert" hat (mit [type=submit]), dachte ich, dass das "=" vielleicht bei den href nicht gehe. Aber das rührte daher, dass ich, a[href*="#slide-show"] und nachfolgend a[href*="#"] formatiert, was mir ersteres beeinflusste.

      bari.

      1. Meine Herren!

        Danke. ja, klappt. war vielleicht zu trivial.

        Just for fun und ohne praktischen Mehrwert: Mit ein wenig Logik reichen der Attribut-Präfix- und -Suffix-Selektor schon aus:

        [class^=foo][class$=foo] {  
            color: green;  
        }
        

        http://jsfiddle.net/3TYEb/

        --
        “All right, then, I'll go to hell.” – Huck Finn
        1. Meine Herren!

          [class^=foo][class$=foo] {

          color: green;
          }

            
          Oh das [matcht auch](http://jsfiddle.net/3TYEb/1/) <span class="foobarfoo">. Vergessen wir das also besser schnell wieder.  
          
          -- 
          “All right, then, I'll go to hell.” – Huck Finn
          
      2. Om nah hoo pez nyeetz, bari!

        Ganzübereinstimmung = a[href='#slide-show']

        Danke. ja, klappt. war vielleicht zu trivial.
        aber da es auf der Seite css/Selektoren/Attributselektoren/Teilübereinstimmung nicht erwähnt ist

        Weil es ja auch keine Teilübereinstimmung ist ;-)

        Matthias

        --
        Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Pose und Poseidon.

        1. Ganzübereinstimmung = a[href='#slide-show']

          Danke. ja, klappt. war vielleicht zu trivial.
          aber da es auf der Seite css/Selektoren/Attributselektoren/Teilübereinstimmung nicht erwähnt ist
          Weil es ja auch keine Teilübereinstimmung ist ;-)

          Hallo Matthias,

          auch trivial, stimmt, natürlich! - Aber wo soll denn einer suchen, wenn sein Geist nicht dazu ausreicht? Man könnte vielleicht eine Fussnote machen, so etwa, href="..." analog dem in Kp ../Wert entsprechend ist auch hier möglich. Ich weiss es nicht.

          Gruss
          bari.

          1. Om nah hoo pez nyeetz, bari!

            auch trivial, stimmt, natürlich! - Aber wo soll denn einer suchen, wenn sein Geist nicht dazu ausreicht? Man könnte vielleicht eine Fussnote machen, so etwa, href="..." analog dem in Kp ../Wert entsprechend ist auch hier möglich. Ich weiss es nicht.

            besser?

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Boll und Bollerwagen.