:last-of-type / :last-child auf Klassenname anwenden – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self :last-of-type / :last-child auf Klassenname anwenden Wed, 16 Feb 11 16:20:30 Z https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494795#m1494795 https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494795#m1494795 <p>Hallo!</p> <p>Ich habe ungefähr folgenden Quelltext:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>dirtree<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>node<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>join<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>node<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>join<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>desc<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token comment"><!-- die gleiche Zeile evtl. noch öfters --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> <p>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.</p> <p>Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?</p> <p>[Hinweis: Und ja, ich weiß, dass diese beiden Pseudo-Klassen in einigen Browsern nicht funktionieren... Das ist aber unwichtig für meinen Zweck.]</p> <p>Danke!</p> :last-of-type / :last-child auf Klassenname anwenden Wed, 16 Feb 11 16:26:02 Z https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494801#m1494801 https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494801#m1494801 <blockquote> <p>Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?</p> </blockquote> <p>Was meinst du mit "auf Klassen anwenden"?</p> <p>.node:last-of-type sollte problemlos funktionieren, .node:last-child ebenfalls</p> :last-of-type / :last-child auf Klassenname anwenden Wed, 16 Feb 11 16:32:04 Z https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494799#m1494799 https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494799#m1494799 <p>Hi,</p> <blockquote> <pre><code class="block language-html"></code></pre> </blockquote> <p><div class="dirtree"></p> <blockquote> <p><div class="node"><div class="join"></div><div class="desc">1</div></div><br> <div class="node"><div class="join"></div><div class="desc">2</div></div><br> <!-- die gleiche Zeile evtl. noch öfters --><br> </div></p> </blockquote> <pre><code class="block"> > > 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:( </code></pre> :last-of-type / :last-child auf Klassenname anwenden Wed, 16 Feb 11 16:44:33 Z https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494796#m1494796 https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494796#m1494796 <p>Hi,</p> <blockquote> <pre><code class="block language-html"></code></pre> </blockquote> <p><div class="dirtree"></p> <blockquote> <p><div class="node"><div class="join"></div><div class="desc">1</div></div><br> <div class="node"><div class="join"></div><div class="desc">2</div></div><br> <!-- die gleiche Zeile evtl. noch öfters --><br> </div></p> </blockquote> <pre><code class="block"> > > 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. </code></pre> :last-of-type / :last-child auf Klassenname anwenden Wed, 16 Feb 11 16:54:56 Z https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494797#m1494797 https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494797#m1494797 <blockquote> <p>Nein, Du willst dem div mit Klasse join, das sich im last-child des div mit Klasse dirtree befindet, eine Extra-Behandlung zukommen lassen.</p> <blockquote> <p>Geht das überhaupt mit CSS? Oder ist :last-of-type und :last-child nicht auf Klassen anwendbar?</p> </blockquote> </blockquote> <p>Danke für die Erklärung! Mit folgendem geht es bestens (sprich Problem gelöst):<br> <code class="language-css"><span class="token selector">.node:last-child .join</span> <span class="token punctuation">{</span> ... <span class="token punctuation">}</span></code></p> <blockquote> <p>Warum eigentlich lauter div? Und warum haben alle Kinder von div.dirtree die Klasse node?<br> Ist das ganze nicht eher eine (evtl verschachtelte) Liste?</p> </blockquote> <p>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.</p> :last-of-type / :last-child auf Klassenname anwenden Wed, 16 Feb 11 17:22:41 Z https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494798#m1494798 https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494798#m1494798 <p>Hi,</p> <blockquote> <p>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.</p> </blockquote> <p>Dann ist das der nächste Fehler, den du beheben solltest.</p> <p>Sinnvolles HTML wird nicht auf Grund der gewünschten Darstellung gewählt.</p> <p>MfG ChrisB</p> <div class="signature">-- <br> RGB is totally confusing - I mean, at least #C0FFEE should be brown, right? </div> :last-of-type / :last-child auf Klassenname anwenden Wed, 16 Feb 11 16:41:23 Z https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494800#m1494800 https://forum.selfhtml.org/self/2011/feb/16/last-of-type-last-child-auf-klassenname-anwenden/1494800#m1494800 <blockquote> <p>Beide Pseudoklassen selektieren unabhängig von sonstigen Klassenzugehörigkeit allein aufgrund der Elementtypen-Hierarchie. Daher ist der Ansatz zum Scheitern verurteilt.<br> Aber für<br> <code class="language-css">div.<span class="token property">dirtree</span> <span class="token punctuation">:</span>last-child</code><br> sieht es IMHO gut aus.</p> </blockquote> <p>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):</p> <pre><code class="block language-css"><span class="token selector">.dirtree .node div:not(.node)</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">div.join:last-child</span> <span class="token punctuation">{</span> <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>./img/join.gif<span class="token punctuation">)</span></span><span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span> <span class="token property">width</span><span class="token punctuation">:</span>18px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>"div.join:last-of-type", ".dirtree .join:last-of-type" und ".dirtree.join:last-child" funktionieren auch nicht.</p>