CSS: (Een na) laatste child selecteren

The Ultimate

16/12/2010 21:08:21

Ik heb de volgende table:

Code (php)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

    <table class="subtotal">
        <tr class="title">
            <td colspan="3">Debiteur overzicht</td>
        </tr>
        <tr class="rule">
            <td>Jaga van Droesburg</td>
            <td class="right">€ 1.125,50</td>
            <td class="right">Nee</td>
        </tr>
        <tr class="rule">
            <td>Ruud van Nistelruden</td>
            <td class="right">€ 500,00</td>
            <td class="right">Ja</td>
        </tr>
        <tr class="rule">
            <td>Jaga van Droesburg</td>
            <td class="right">€ 1.125,50</td>
            <td class="right">Nee</td>
        </tr>
        <tr class="rule">
            <td>Ruud van Nistelruden</td>
            <td class="right">€ 500,00</td>
            <td class="right">Ja</td>
        </tr>
        <tr class="rule">
            <td>Jaga van Droesburg</td>
            <td class="right">€ 1.125,50</td>
            <td class="right">Nee</td>
        </tr>
        <tr class="rule">
            <td>Ruud van Nistelruden</td>
            <td class="right">€ 500,00</td>
            <td class="right">Ja</td>
        </tr>
        <tr class="rule">
            <td>Jaga van Droesburg</td>
            <td class="right">€ 1.125,50</td>
            <td class="right">Nee</td>
        </tr>
        <tr class="rule">
            <td>Ruud van Nistelruden</td>
            <td class="right">€ 500,00</td>
            <td class="right">Ja</td>
        </tr>
        <tr class="rule">
            <td>Jaga van Droesburg</td>
            <td class="right">€ 1.125,50</td>
            <td class="right">Nee</td>
        </tr>
        <tr class="total">
            <td>Totaal</td>
            <td class="right">€ 12.120,50</td>
            <td class="right"> </td>
        </tr>
    </table>

Hoe kan ik nu middels een CSS-selector de laatste tr.rule van de table.subtotal selecteren?

Ik heb al dit geprobeerd:
.subtotal tr.rule:last-child{}
table.subtotal tr.rule:last-child{}
Maar geen van beiden werkt.

EDIT:
Ik heb inmiddels een oplossing gevonden:
.subtotal tr:nth-last-child(-n+2){
border-bottom:2px dashed #999;
}
.subtotal tr:nth-last-child(-n+1){
border-bottom:1px solid #D8D8D8;
}
Dit vindt ik niet echt een nette oplossing, maar het werkt wel. Mocht iemand een andere/nettere methode weten, dan hoor ik dit uiteraard graag.

Gewijzigd op 16/12/2010 21:29:15 door The Ultimate

PHP hulp

24/05/2012 07:39:41

Gesponsorde koppelingen:

Wouter J

16/12/2010 21:44:51

nth-last-child() is een CSS3 functie. Dit zal dus nog niet werken in <IE9. Daarnaast kunnen andere browsers dit mogelijk ook nog niet helemaal ondersteunen.

Je kan zoiets ook met javascript doen. Dan moet je met javascript het laatste element opzoeken en vervolgens die een class meegeven. Ik weet wel hoe dit in jq moet, helaas niet hoe dit in js moet.

Jens V

16/12/2010 21:49:45

Wouter J op 16/12/2010 21:44:51:

Je kan zoiets ook met javascript doen. Dan moet je met javascript het laatste element opzoeken en vervolgens die een class meegeven. Ik weet wel hoe dit in jq moet, helaas niet hoe dit in js moet.

Ik denk dat je je table een id moet geven. Dan kun je via de DOM-parser van JavaScript een lijst (array) van alle kinderen opvragen.

The Ultimate

16/12/2010 22:13:33

@Wouter & Jens:
Bedankt voor het meedenken. En het is inderdaad zo dat IE er nog niets mee kan....GRRRRRWWW.....Waarom blijven ze bij Microsoft toch zo achter?

Helaas heb ik 0,0 ervaring met javascript. En ook javascript wordt niet altijd ondersteund, althans kan uitgeschakeld staan.

Aangezien het om waarschijnlijk telkens om gegevens uit een database gaat kan ik natuurlijk ook een php-oplossing maken. Alleen dat vind ik minder mooi.

Maar wanneer ik het script in IE bekijk zie ik dat er weinig anders op zit dan het aan te passen.

Bedankt voor de waarschuwing <IE9.

PHPhulp is een Nederlandstalige PHP community sinds 2002. Je vindt hier PHP tutorials, PHP scripts, PHP boeken en nog veel meer. Alles is geheel gratis!