Problem with table indexing and pseudo classes
Truhera opened this issue · comments
Hello,
I am trying to generate XHTML with applying CSS to it. I am struggling with following CSS Code:
table#corporate tr:first-child { background-color:#002a55; color:#fff; font-weight:bold } table#corporate tr:nth-child(odd):not(:first-child) { background-color:#f5f5f5; color:#000; } table#corporate tr:nth-child(even) { background-color:#fff; color:#000 }
This should be applied to a table:
<table id="corporate"> <tbody> <tr> <td>Test</td> <td>.</td> </tr> <tr> <td>.</td> <td>.</td> </tr> <tr> <td>.</td> <td>.</td> </tr> <tr> <td>.</td> <td>.</td> </tr> <tr> <td>.</td> <td>.</td> </tr> </tbody> </table>
but the CSS only get's applied to the first 4 table rows, the last row is skipped every time I use some kind of pseudoclass selectors.
I also tried specifically selecting the 5th nth-child but with no luck. I think the algorithm stops at the last entry of the table row entries.
The HTML after applying CSS:
<table id="corporate"> <tbody> <tr style="background-color: #002a55; color: #fff; font-weight: bold; "> <td>Test</td> <td>.</td> </tr> <tr style="background-color: #fff; color: #000; "> <td>.</td> <td>.</td> </tr> <tr style="background-color: #f5f5f5; color: #000; "> <td>.</td> <td>.</td> </tr> <tr style="background-color: #fff; color: #000; "> <td>.</td> <td>.</td> </tr> <tr> <td>.</td> <td>.</td> </tr> </tbody> </table>
The css4j version I'm using: css4j 3.7.1
Weird. What back-end are you using? I tested it with the native DOM and the DOM wrapper, cannot reproduce your issue.
Are you using css4j-dom4j ?
Could you post a reproducer ?
The document that I'm using:
<!DOCTYPE html>
<html>
<head>
<style>
table#corporate tr:first-child { background-color:#002a55; color:#faf; font-weight:bold }
table#corporate tr:nth-child(odd):not(:first-child) { background-color:#f5f5f5; color:#001; }
table#corporate tr:nth-child(even) { background-color:#fbf; color:#100 }
</style>
</head>
<body>
<table id="corporate">
<tbody>
<tr id="tr1"> <td>Test</td> <td>.</td> </tr>
<tr id="tr2"> <td>.</td> <td>.</td> </tr>
<tr id="tr3"> <td>.</td> <td>.</td> </tr>
<tr id="tr4"> <td>.</td> <td>.</td> </tr>
<tr id="tr5"> <td>.</td> <td>.</td> </tr>
</tbody>
</table>
</body>
</html>For both tr3 and tr5 I get a (reduced) computed style of background-color:#f5f5f5;color:#001;. Isn't that what you are getting?
I managed to reproduce the problem with css4j-dom4j. Working on a patch.
The issue is fixed in master, fix will be released in css4j 3.7.2 and css4j-dom4j 3.7.1.
Unless you have more issues to report, I'll release the new versions soon.