dave: :target und ":defaulttarget"

Hi,

ich hab eine kleine Seite auf der verschiedene Layer in Abhängigkeit vom location-hash angezeigt werden:

  
<!DOCTYPE html>  
<html>  
  <head>  
    <title></title>  
    <style type="text/css">  
[code lang=css]      .layer {display:none;}  
      .layer:target {display:block;}

</style>
  </head>
  <body>
    <a href="#foo">to foo</a>
    <a href="#bar">to bar</a>
    <div id="foo" class="layer">foo</div>
    <div id="bar" class="layer">bar</div>
  </body>
</html>[/code]

Nun möchte ich aber eins davon angezeigt haben wenn _kein_ hash angegeben ist, als default sozusagen.

Das wird nicht möglich sein oder?

~dave

  1. @@dave:

    nuqneH

    <div id="foo" class="layer">foo</div>
        <div id="bar" class="layer">bar</div>

    Da ist wohl 'section' angebracht; @class kannst du dir dann evtl. sparen:

      <section id="foo">foo</section>  
      <section id="bar">bar</section>
    

    Nun möchte ich aber eins davon angezeigt haben wenn _kein_ hash angegeben ist, als default sozusagen.

    Welches? Das erste? Das letzte? Ein beliebiges?

    Das wird nicht möglich sein oder?

    Kommt drauf an.

    Wenn das letze:

    section:target, section:last-of-type { display: block }  
    section:not(:target), section:target~section:last-of-type { display: none }
    

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Hi

      <div id="foo" class="layer">foo</div>
          <div id="bar" class="layer">bar</div>

      Da ist wohl 'section' angebracht; @class kannst du dir dann evtl. sparen:

      Stimmt.

      Welches? Das erste? Das letzte? Ein beliebiges?

      Das ist mir zum Glück egal, hauptsache irgendeins.

      Wenn das letze:

      section:target, section:last-of-type { display: block }

      section:not(:target), section:target~section:last-of-type { display: none }

        
      Den ~-Selektor vergessen ich nur zu gerne.  
      Ich weis nicht mal wie man den nennt xD  
        
      Vielen Dank.  
        
      ~dave
      
      1. Om nah hoo pez nyeetz, dave!

        Den ~-Selektor vergessen ich nur zu gerne.

        ...

        ~dave

        ???  ;p

        Es ist kein Selektor sondern ein Kombinator. Er heißt General sibling combinator. Im Wiki in Ermangelung einer besseren Übersetzung Schwesternselektor. Er steht dort zwar unter der Überschrift Kombinatoren, aber ...

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif
        1. ...Im Wiki in Ermangelung einer besseren Übersetzung Schwesternselektor.

          Naja, Geschwisterselektor würde vielleicht klarer machen, worum es geht, eben nicht unbedingt um 'ne Schwester ...

          1. Moin,

            ...Im Wiki in Ermangelung einer besseren Übersetzung Schwesternselektor.
            Naja, Geschwisterselektor würde vielleicht klarer machen, worum es geht, eben nicht unbedingt um 'ne Schwester ...

            zumal der Begriff "Geschwister" die direkte und übliche Übersetzung des englischen Ausdrucks "sibling" wäre.

            Ciao,
             Martin

            --
            Frauen sind wie Elektrizität: Fasst man sie an, kriegt man eine gewischt.
            Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
            1. Om nah hoo pez nyeetz, Der Martin!

              zumal der Begriff "Geschwister" die direkte und übliche Übersetzung des englischen Ausdrucks "sibling" wäre.

              http://forum.de.selfhtml.org/archiv/2010/12/t202276/#m1366008 ff

              Matthias

              --
              http://www.billiger-im-urlaub.de/kreis_sw.gif
      2. Hi,

        mit dem general sibling combinator habe ich leider im IE Probleme (an dieser Stelle möchte ich mich für das Doppelposting entschuldigen).

        Hat jemand noch eine andere Idee?

        ~dave

    2. @@Gunnar Bittersmann:

      nuqneH

      section:target, section:last-of-type { display: block }

      section:not(:target), section:target~section:last-of-type { display: none }

        
      So natürlich nicht!  
        
      Ich wollte erst schreiben  
        
      ~~~css
      section:target, section:last-of-type { display: block }  
      section, section:target~section:last-of-type { display: none }
      

      was in modernen Browsern auch funktioniert.

      Ich hatte befürchtet, dass dies in älteren Browsern, die :target nicht kennen, gar kein 'section'-Element anzeigt. Vermutlich grundlos, denn die ignorieren dann wohl die gesamte Regel.

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)