mola: Nachfolgende Elemente

Hey

Ich habe hier einen XHTML-Quelltext, auf den ich keinen Einfluss habe. Ich darf ihn lediglich mit einer externen CSS-Datei bearbeiten.

In diesem XHTML-Quelltext gibt es nun ein span mit der class "fu". Ich möchte aber, dass ich auch die Elemente _nach_ dem span.fu ansprechen kann. Bei diesen Elementen nach span.fu handelt es sich um Listen (<ul><li></li></ul>).
Wenn ich sie normal ansprechen würde, also mit "ul li{}", dann würden alle Listenelemente angesprochen werden, doch ich möchte nur diejenigen Listenelemente ansprechen, die nach dem span mit der Klasse "fu" kommen.

Ist das irgendwie möglich?

Danke
euer Mola

  1. puts "Hallo " + gets.chomp + "."

    ?> mola
    => Hallo mola.

    In diesem XHTML-Quelltext gibt es nun ein span mit der class "fu". Ich möchte aber, dass ich auch die Elemente _nach_ dem span.fu ansprechen kann. Bei diesen Elementen nach span.fu handelt es sich um Listen (<ul><li></li></ul>).

    Also so?

    <span class="fu">Foo</span>  
    <ul>  
      <li>Bar</li>  
      ...  
    <ul>
    

    [...] doch ich möchte nur diejenigen Listenelemente ansprechen, die nach dem span mit der Klasse "fu" kommen.

    Also doch so?

    <span class="fu">  
    <ul>  
      <li>Bar</li>  
      ...  
    <ul>  
    </span>
    

    Wenn ja: es ist nicht erlaubt, ein Blockelement (ul) in ein Inlineelement (span) zu packen.

    Ist das irgendwie möglich?

    Ja, mit dem entsprechenden Selektoren.

    Einen schönen Mittwoch noch.

    Gruß, Ashura

    --
    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
    30 Days to becoming an Opera8 Lover -- Day 20: search.ini
    Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
    [Deshalb frei! - Argumente pro freie Software]
    1. Hi Ashura

      Also so?

      <span class="fu">Foo</span>

      <ul>
        <li>Bar</li>
        ...
      <ul>

        
      Genau so.  
        
        
      
      > > [...] doch ich möchte nur diejenigen Listenelemente ansprechen, die nach dem span mit der Klasse "fu" kommen.  
      >   
      > Also doch so?  
      >   
      > ~~~html
      
      <span class="fu">  
      
      > <ul>  
      >   <li>Bar</li>  
      >   ...  
      > <ul>  
      > </span>
      
      

      Wie kommst du jetzt darauf? Die Listenelemente, die _nach_ span.fu kommen, nicht diejenigen die drin sind.

      Wenn ja: es ist nicht erlaubt, ein Blockelement (ul) in ein Inlineelement (span) zu packen.

      Weiß ich doch :-). Invalide und so...

      Ist das irgendwie möglich?

      Ja, mit dem entsprechenden Selektoren.

      Ja, ich bin kein Anfänger mehr. Aber das ist eben nicht das was ich suche.

      Trotzdem Danke
      Mola

      1. puts "Hallo " + gets.chomp + "."

        ?> Mola
        => Hallo Mola.

        <span class="fu">Foo</span>

        <ul>
          <li>Bar</li>
          <li>Bar</li>
          <li>Bar</li>
          <li>Bar</li>
          ...
        <ul>

          
        
        > Ja, ich bin kein Anfänger mehr. Aber das ist eben nicht das was ich suche.  
          
        Wenn dir das nicht genügt, kannst du ja einmal einen Blick auf die [CSS3-Selektoren](http://www.w3.org/TR/2001/CR-css3-selectors-20011113/) werfen. Doch die Unterstützung der neuen Selektoren ist noch sehr ärmlich.  
          
          
        Einen schönen Mittwoch noch.  
          
        Gruß, Ashura  
        
        -- 
        Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|  
        [30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 20: search.ini](http://operalover.tntluoma.com/8/day_20_searchini)  
        Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0  
        [\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
        
        1. Hallo

          Ja, ich bin kein Anfänger mehr. Aber das ist eben nicht das was ich suche.

          Wenn dir das nicht genügt, kannst du ja einmal einen Blick auf die CSS3-Selektoren werfen. Doch die Unterstützung der neuen Selektoren ist noch sehr ärmlich.

          Also ist mein Vorhaben (noch) nicht möglich. Schade, muss ich wohl irgendwie anders lösen.

          Tschüss
          Mola

        2. hi,

          Wenn dir das nicht genügt, kannst du ja einmal einen Blick auf die CSS3-Selektoren werfen.

          um ein UL zu formatieren, das direkt auf einen (bestimmten) span folgt, genügt auch der Adjacent sibling selector aus CSS 2.1.

          Doch die Unterstützung der neuen Selektoren ist noch sehr ärmlich.

          die untersützung dieses CSS 2.1 selektors ist nur in einem gewissen erbärmlichen browser noch ärmlich ( = nicht vorhanden).

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
          1. puts "Hallo " + gets.chomp + "."

            ?> wahsaga
            => Hallo wahsaga.

            um ein UL zu formatieren, das direkt auf einen (bestimmten) span folgt, genügt auch der Adjacent sibling selector aus CSS 2.1.

            Richtig. Doch wie formatiere ich z. B. nur das allererste <li> aus dieser <ul>, so wie Mola es möchte?

            Doch die Unterstützung der neuen Selektoren ist noch sehr ärmlich.

            die untersützung dieses CSS 2.1 selektors ist nur in einem gewissen erbärmlichen browser noch ärmlich ( = nicht vorhanden).

            Traurig, aber wahr.

            Einen schönen Mittwoch noch.

            Gruß, Ashura

            --
            Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Day 20: search.ini
            Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
            [Deshalb frei! - Argumente pro freie Software]
            1. puts "Hallo " + gets.chomp + "."

              ?>
              => Hallo.

              Richtig. Doch wie formatiere ich z. B. nur das allererste <li> aus dieser <ul>, so wie Mola es möchte?

              OK, dummes Beispiel, dafür gibt es ja :first-child.

              Doch ich frage mich, welche <li> Mola nun eigentlich formatieren wollte:

              [...] doch ich möchte nur diejenigen Listenelemente ansprechen, die nach dem span mit der Klasse "fu" kommen.

              Einen schönen Mittwoch noch.

              Gruß, Ashura

              --
              Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
              30 Days to becoming an Opera8 Lover -- Day 20: search.ini
              Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
              [Deshalb frei! - Argumente pro freie Software]
              1. Hallo zusammen

                Doch ich frage mich, welche <li> Mola nun eigentlich formatieren wollte:

                Okay, nochmal zum Verständnis. Ich habe grob folgenden statischen
                HTML-Quellcode:

                  
                <span class="fu">Ebene 1</span>  
                <ul>  
                 <li>Ebene 1.1</li>  
                   <ul>  
                    <li>Ebene 1.1.1</li>  
                    <li>Ebene 1.1.2</li>  
                   </ul>  
                 <li>Ebene 1.2</li>  
                 <li>Ebene 1.3</li>  
                </ul>  
                  
                <span class="abc">Ebene 2</span>  
                <ul>  
                 <li>Ebene 2.1</li>  
                 <li>Ebene 2.2</li>  
                </ul>  
                
                

                Man beachte die andere Klasse der zweiten <span>s.

                Ich möchte die Ebenen 1.1, 1.1.1, 1.1.2, 1.2 und 1.3 bearbeitet können. Alles ab Ebene 2 möchte ich nicht bearbeitet haben.

                Also das:

                  
                span.fu + ul li{ }  
                
                

                funktioniert es nicht.

                Hoffe, jetzt ist es klar.

                Danke
                Mola

                1. Hi,

                  <span class="fu">Ebene 1</span>
                  <ul>
                  <li>Ebene 1.1</li>
                     <ul>

                  die UL ist hier nicht zulässig.  
                    
                  
                  > Also das:  
                  >   
                  > ~~~css
                    
                  
                  > span.fu + ul li{ }  
                  > 
                  
                  

                  funktioniert es nicht.

                  in allen modernen Browsern würde das - bei korrektem HTML-Code - funktionieren.

                  freundliche Grüße
                  Ingo

                  1. puts "Hallo " + gets.chomp + "."

                    ?> Ingo
                    => Hallo Ingo.

                    <span class="fu">Ebene 1</span>
                    <ul>
                    <li>Ebene 1.1</li>
                       <ul>

                    
                    > die UL ist hier nicht zulässig.  
                      
                    Bitte erlöse mich und sage mir warum.  
                      
                      
                    Einen schönen Mittwoch noch.  
                      
                    Gruß, Ashura  
                    
                    -- 
                    Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|  
                    [30 Days to becoming an Opera8 Lover](http://operalover.tntluoma.com/8/) -- [Day 20: search.ini](http://operalover.tntluoma.com/8/day_20_searchini)  
                    Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0  
                    [\[Deshalb frei! - Argumente pro freie Software\]](http://deshalbfrei.org/)
                    
                    1. Hallo,

                      <span class="fu">Ebene 1</span>
                      <ul>
                      <li>Ebene 1.1</li>
                         <ul>

                      
                      > > die UL ist hier nicht zulässig.  
                      >   
                      > Bitte erlöse mich und sage mir warum.  
                      
                      Das schließende li ist hier fehl am Platze. Es wird nach dem Schließen des ul gesetzt. Daher darf an dieser Stelle kein ul stehen.  
                        
                      Ciao
                      
                      1. puts "Hallo " + gets.chomp + "."

                        ?> schneemann
                        => Hallo schneemann.

                        Das schließende li ist hier fehl am Platze. Es wird nach dem Schließen des ul gesetzt. Daher darf an dieser Stelle kein ul stehen.

                        Ich bin schon so verwirrt vom + Selektor, dass ich darauf gar nicht geschaut habe. Es ist mir aber bewusst, also keine Sorge.

                        Aber was ich mich eigentlich frage (was auch der Grund ist, warum ich momentan verwirrt bin), warum bei folgendem Konstrukt nicht die erste UL selektiert wird:

                        <?xml version="1.0"?>  
                        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
                        <html>  
                          <head>  
                            <title>New Document</title>  
                            <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
                            <style type="text/css">  
                              [code lang=css]span + ul{border:2px solid #333;}  
                              span + ul li{border:2px solid #f00;}
                        

                        </style>
                          </head>
                          <body>
                            <p>
                            <span class="fu">Foo</span>
                            <ul>
                              <li>Bar</li>
                              <li>Bar</li>
                              <li>Bar</li>
                            </ul>
                            <span class="other">Bar</span>
                            <ul>
                              <li>Foo</li>
                              <li>Foo</li>
                              <li>Foo</li>
                            </ul>
                            </p>
                          </body>
                        </html>[/code]

                        Einen schönen Mittwoch noch.

                        Gruß, Ashura

                        --
                        Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
                        30 Days to becoming an Opera8 Lover -- Day 20: search.ini
                        Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
                        [Deshalb frei! - Argumente pro freie Software]
                        1. Hi,

                          <p>
                              <span class="fu">Foo</span>
                              <ul>

                          p darf kein ul enthalten.

                          Die erste ul ist vermutlich genau deswegen nicht formatiert - das p wird implizit vor dem ul geschlossen, damit ist ul kein sibling vom span.

                          cu,
                          Andreas

                          --
                          Warum nennt sich Andreas hier MudGuard?
                          Schreinerei Waechter
                          Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                          1. puts "Hallo " + gets.chomp + "."

                            ?> MudGuard
                            => Hallo MudGuard.

                            p darf kein ul enthalten.

                            Die erste ul ist vermutlich genau deswegen nicht formatiert - das p wird implizit vor dem ul geschlossen, damit ist ul kein sibling vom span.

                            Warum schreibe ich als Versuchsaufbau gerade einen solchen Mist zusammen, wo doch sonst meine Seiten absolut korrekt geschachtelt sind...

                            Jedenfalls danke für die Erleuchtung, ein Blick in SelfHTML hätte mir zwar ebenso geholfen, aber wer kommt schon darauf. ;-)

                            Einen schönen Donnerstag noch.

                            Gruß, Ashura

                            --
                            Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
                            30 Days to becoming an Opera8 Lover -- Day 20: search.ini
                            Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
                            [Deshalb frei! - Argumente pro freie Software]
                2. puts "Hallo " + gets.chomp + "."

                  ?> Mola
                  => Hallo Mola.

                  <span class="fu">Ebene 1</span>
                  <ul>
                  <li>Ebene 1.1</li>
                     <ul>
                      <li>Ebene 1.1.1</li>
                      <li>Ebene 1.1.2</li>
                     </ul>
                  <li>Ebene 1.2</li>
                  <li>Ebene 1.3</li>
                  </ul>

                  <span class="abc">Ebene 2</span>
                  <ul>
                  <li>Ebene 2.1</li>
                  <li>Ebene 2.2</li>
                  </ul>

                    
                  Du kannst das Blockelement verwenden, in dem die spans und uls enthalten sind (Beispiel <p>):  
                    
                  ~~~css
                  p + ul{border:2px solid #333;}  
                  p + ul li{border:2px solid #f00;}
                  

                  Damit wird nur die erste Liste selektiert, das span ist hierbei irrelevant.

                  Einen schönen Mittwoch noch.

                  Gruß, Ashura

                  --
                  Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
                  30 Days to becoming an Opera8 Lover -- Day 20: search.ini
                  Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
                  [Deshalb frei! - Argumente pro freie Software]
                  1. Hi,

                    Du kannst das Blockelement verwenden, in dem die spans und uls enthalten sind (Beispiel <p>):

                    Schlechtes Beispiel. Weil p kein ul enthalten darf.

                    Abgesehen davon, wenn p also Elternelement des ul wäre, wäre
                    p + ul
                    natürlich unsinnig, da Eltern keine Geschwister sind.

                    cu,
                    Andreas

                    --
                    Warum nennt sich Andreas hier MudGuard?
                    Schreinerei Waechter
                    Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                    1. puts "Hallo " + gets.chomp + "."

                      ?> MudGuard
                      => Hallo MudGuard.

                      Schlechtes Beispiel. Weil p kein ul enthalten darf.

                      Abgesehen davon, wenn p also Elternelement des ul wäre, wäre
                      p + ul
                      natürlich unsinnig, da Eltern keine Geschwister sind.

                      Ist ja gut. ;-)

                      Einen schönen Donnerstag noch.

                      Gruß, Ashura

                      --
                      Selfcode: sh:( fo:) ch:? rl:( br:^ n4:& ie:{ mo:) va:) de:> zu:) fl:( ss:| ls:[ js:|
                      30 Days to becoming an Opera8 Lover -- Day 20: search.ini
                      Meine Browser: Opera 8.01 | Firefox 1.0.4 | Lynx 2.8.3 | Netscape 4.7 | IE 6.0
                      [Deshalb frei! - Argumente pro freie Software]
                    2. hi,

                      natürlich unsinnig, da Eltern keine Geschwister sind.

                      lege dich diesbezüglich niemals fest, so lange du die familienverhältnisse deines diskussionspartners nicht genau kennst ...

                      gruß,
                      wahsaga

                      --
                      /voodoo.css:
                      #GeorgeWBush { position:absolute; bottom:-6ft; }