CSS: (Een na) laatste child selecteren
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
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>
<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
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.
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.
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.