pcworld: :last-of-type / :last-child auf Klassenname anwenden

Hallo!

Ich habe ungefähr folgenden Quelltext:

<div class="dirtree">  
<div class="node"><div class="join"></div><div class="desc">1</div></div>  
<div class="node"><div class="join"></div><div class="desc">2</div></div>  
<!-- die gleiche Zeile evtl. noch öfters -->  
</div>

Nun möchte ich dem letzten div der Klasse "join" eine extra-Behandlung in der CSS-Datei verpassen. Ich habe es mit :last-of-type und :last-child versucht, nur will das nicht funktionieren.

Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?

[Hinweis: Und ja, ich weiß, dass diese beiden Pseudo-Klassen in einigen Browsern nicht funktionieren... Das ist aber unwichtig für meinen Zweck.]

Danke!

  1. Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?

    Was meinst du mit "auf Klassen anwenden"?

    .node:last-of-type sollte problemlos funktionieren, .node:last-child ebenfalls

  2. Hi,

    <div class="dirtree">

    <div class="node"><div class="join"></div><div class="desc">1</div></div>
    <div class="node"><div class="join"></div><div class="desc">2</div></div>
    <!-- die gleiche Zeile evtl. noch öfters -->
    </div>

    
    >   
    > Nun möchte ich dem letzten div der Klasse "join" eine extra-Behandlung in der CSS-Datei verpassen. Ich habe es mit :last-of-type und :last-child versucht, nur will das nicht funktionieren.  
      
    natürlich nicht, jedenfalls nicht mit dieser Struktur.  
    Das letzte div.join ist weder ein :last-child (letztes Kind seines Elternelements), noch ein last-of-type (letztes Kind eines bestimmten Typs in seinem Elternelement).  
      
    
    > Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?  
      
    Beide Pseudoklassen selektieren unabhängig von sonstigen Klassenzugehörigkeit allein aufgrund der Elementtypen-Hierarchie. Daher ist der Ansatz zum Scheitern verurteilt.  
    Aber für  
    `div.dirtree :last-child`{:.language-css}  
    sieht es IMHO gut aus.  
      
    Ciao,  
     Martin  
    
    -- 
    Nein, es ist nicht wahr, dass bei der Post Beamte schneller befördert werden als Pakete.  
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    
    1. Beide Pseudoklassen selektieren unabhängig von sonstigen Klassenzugehörigkeit allein aufgrund der Elementtypen-Hierarchie. Daher ist der Ansatz zum Scheitern verurteilt.
      Aber für
      div.dirtree :last-child
      sieht es IMHO gut aus.

      Geht leider nicht (habe div.join genommen und nicht div.dirtree, da sich die Regel nur für divs mit der Klasse join auswirken soll):

      .dirtree .node div:not(.node) {  
      	display: inline-block;  
      }  
        
      div.join:last-child {  
      	background-image: url(./img/join.gif);  
      	height: 18px;  
      	width:18px;  
      }
      

      "div.join:last-of-type", ".dirtree .join:last-of-type" und ".dirtree.join:last-child" funktionieren auch nicht.

  3. Hi,

    <div class="dirtree">

    <div class="node"><div class="join"></div><div class="desc">1</div></div>
    <div class="node"><div class="join"></div><div class="desc">2</div></div>
    <!-- die gleiche Zeile evtl. noch öfters -->
    </div>

    
    >   
    > Nun möchte ich dem letzten div der Klasse "join" eine extra-Behandlung in der CSS-Datei verpassen.  
      
    Nein, Du willst dem div mit Klasse join, das sich im last-child des div mit Klasse dirtree befindet, eine Extra-Behandlung zukommen lassen.  
      
    
    > Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?  
      
    :last-of-type bezieht sich, wie der Name sagt, auf den Element-Type.  
    Und :last-child bezieht sich auf das letzte Kind.  
      
    Mit Klassen hat das überhaupt nichts zu tun.  
      
    Warum eigentlich lauter div? Und warum haben alle Kinder von div.dirtree die Klasse node?  
    Ist das ganze nicht eher eine (evtl verschachtelte) Liste?  
      
    cu,  
    Andreas
    
    -- 
    [Warum nennt sich Andreas hier MudGuard?](http://MudGuard.de/)  
    [O o ostern ...](http://ostereier.andreas-waechter.de/)  
      
    Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.  
    
    
    1. Nein, Du willst dem div mit Klasse join, das sich im last-child des div mit Klasse dirtree befindet, eine Extra-Behandlung zukommen lassen.

      Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?

      Danke für die Erklärung! Mit folgendem geht es bestens (sprich Problem gelöst):
      .node:last-child .join { ... }

      Warum eigentlich lauter div? Und warum haben alle Kinder von div.dirtree die Klasse node?
      Ist das ganze nicht eher eine (evtl verschachtelte) Liste?

      Von der Logik her hätte ich vielleicht mit <ul> und <li> arbeiten sollen, allerdings hätte ich dann CSS-mäßig alles auf die Art eines divs zurücksetzen müssen (aufgrund der Darstellung), sodass ich gleich divs genommen habe.

      1. Hi,

        Von der Logik her hätte ich vielleicht mit <ul> und <li> arbeiten sollen, allerdings hätte ich dann CSS-mäßig alles auf die Art eines divs zurücksetzen müssen (aufgrund der Darstellung), sodass ich gleich divs genommen habe.

        Dann ist das der nächste Fehler, den du beheben solltest.

        Sinnvolles HTML wird nicht auf Grund der gewünschten Darstellung gewählt.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?