Julian H.: Vorletztes Kind von <body> ansprechen

Hallo,

gibt es eine Möglichkeit mit Hilfe von CSS das vorletzte Kind von body anzusprechen? Das Proble ist das das jedes Block-Element sein könnte. Der HTML-Code könnte zum Beispiel so aussehen:

  
[...]  
<body>  
<h1>Überschrift</h1>  
<p>Absatz</p>  
<ul>  
<li>Liste<li>  
</ul>  
<p>Absatz</p>  
</body>  
[...]  

...das heißt das vorletzte Kind wäre die ungeordnete Liste.
Der HTML-Code könnte aber auch so aussehen:

  
[...]  
<body>  
<h1>Überschrift</h1>  
<p>Absatz</p>  
<p>Absatz</p>  
<p>Absatz</p>  
</body>  
[...]  

...in diesem Fall wäre das vorletzte Kind ein Absatz.
Das einzige was immer bleibt ist die Überschrift erster Ordnung als erstes Kind von <body> und der letzte Absatz als letztes Kind von <body>
Da das vorletzte Kind jedes Block-Element sein könnte komme ich mit den CSS3-Pseudoklassen :nth-last-of-type und :nth-last-child nicht weiter.
Oder ist das doch möglich?

Gruß Julian

  1. Da das vorletzte Kind jedes Block-Element sein könnte komme ich mit den CSS3-Pseudoklassen :nth-last-of-type

    Verständlich

    und :nth-last-child nicht weiter.

    body>*:nth-last-child(+2) {  
      color: red;  
    }
    

    Oder ist das doch möglich?

    Firefox 3.5, Safari 4 und Opera 9.5 aufwärts - die restlichen Browser[1] kannst du knicken ;)

    [1] Bekannte Browser - natürlich sind auch jene ausgenommen die sich die Engine mit den genannten teilen - z.B K-Meleon

    1. Hallo,

      body>*:nth-last-child(+2) {

      color: red;
      }

      
      >   
        
      Danke, danach hab ich gesucht.  
        
      
      > > Oder ist das doch möglich?  
      >   
      > Firefox 3.5, Safari 4 und Opera 9.5 aufwärts - die restlichen Browser[1] kannst du knicken ;)  
        
      Dass es der IE 6 nicht beherrscht wäre ok gewesen, aber IE 7 und 8 hätte ich doch gern bedient. Dann muss ich wohl doch den HTML-Code verändern.  
        
      Gruß Julian
      
      1. Dass es der IE 6 nicht beherrscht wäre ok gewesen, aber IE 7 und 8 hätte ich doch gern bedient. Dann muss ich wohl doch den HTML-Code verändern.

        Oder du nutzt die bereits vorgeschlagene JavaScript-Lösung (jQuery) um das Element zu selektieren.

        1. Hallo,

          Dass es der IE 6 nicht beherrscht wäre ok gewesen, aber IE 7 und 8 hätte ich doch gern bedient. Dann muss ich wohl doch den HTML-Code verändern.

          Oder du nutzt die bereits vorgeschlagene JavaScript-Lösung (jQuery) um das Element zu selektieren.

          Ich habe leider noch nie mit Javascript gearbeitet, deshalb belasse ich es bei meiner Lösung.
          Trotzdem Danke.

          Gruß Julian

      2. @@Julian H.:

        nuqneH

        Dass es der IE 6 nicht beherrscht wäre ok gewesen, aber IE 7 und 8 hätte ich doch gern bedient. Dann muss ich wohl doch den HTML-Code verändern.

        Nein. Für IEs kannst du JavaScript-Anweisungen im Stylesheet notieren (CSS-Expressions):

        body>*  
        {  
          color: expression( [code lang=javascript](new Function('elem', 'elem.style.color = (elem.nextSibling && !elem.nextSibling.nextSibling ? "red" : "inherit");'))(this)
        ~~~ );  
        }[/code]  
          
        Der 6er beherrscht den Kindselektor nicht, der 8er keine Expressions. Du kannst aber (für diese Seite) [den 8er als 7er betreiben](http://aktuell.de.selfhtml.org/weblog/kompatibilitaetsmodus-im-internet-explorer-8).  
          
        Qapla'
        
        -- 
        Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)
        
  2. @@Julian H.:

    nuqneH

    Da das vorletzte Kind jedes Block-Element sein könnte komme ich mit den CSS3-Pseudoklassen :nth-last-of-type und :nth-last-child nicht weiter.

    Warum nicht?

    Für „jedes Element“ gibt es den universellen Selektor. [CSS2 §5.3]

    Qapla'

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

    gibt es eine Möglichkeit mit Hilfe von CSS das vorletzte Kind von body anzusprechen?

    Ich wag mich mal vor, weiß aber nicht ob ich die CSS3-Syntax richtig interpretiere, zumal es ja meines Wissens an dieser Stelle auch noch kein Browser tut.

    body > *:nth-last-child( -2 )

    Mit jQuery würde ich mir das vorletzte direkte Kindelement des BODY-Elements wie folgt greifen:

    $("body > *:last").prev()
    http://docs.jquery.com/Selectors
    http://docs.jquery.com/Traversing/prev#expr

    Gruß Gernot

    1. Hallo nochmal,

      Ich wag mich mal vor, weiß aber nicht ob ich die CSS3-Syntax richtig interpretiere, zumal es ja meines Wissens an dieser Stelle auch noch kein Browser tut.

      body > *:nth-last-child( -2 )

      Diesen gerade verworfen und suits Vorschlag stattdessen für gut befunden.

      Gruß Gernot