Stranger6667/css-inline

Add support for :nth-child selector

Closed this issue · 5 comments

I have the following style tag

<style>tbody tr:nth-child(odd) td {background-color:grey;}</style>

However the style is being added to every cell in the table, not just the odd numbered rows.
The expected result:

<table>
   <tbody>
      <tr>
         <td style="background-color: grey;">Test</td>
         <td style="background-color: grey;">Test</td>
      </tr>
      <tr>
         <td>Test</td>
         <td>Test</td>
      </tr>
      <tr>
         <td style="background-color: grey;">Test</td>
         <td style="background-color: grey;">Test</td>
      </tr>
      <tr>
         <td>Test</td>
         <td>Test</td>
      </tr>
   </tbody>
</table>

The actual result:

<table>
   <tbody>
      <tr>
         <td style="background-color: grey;">Test</td>
         <td style="background-color: grey;">Test</td>
      </tr>
      <tr>
         <td style="background-color: grey;">Test</td>
         <td style="background-color: grey;">Test</td>
      </tr>
      <tr>
         <td style="background-color: grey;">Test</td>
         <td style="background-color: grey;">Test</td>
      </tr>
      <tr>
         <td style="background-color: grey;">Test</td>
         <td style="background-color: grey;">Test</td>
      </tr>
   </tbody>
</table>

Hi, thank you for reporting. This is a bug, and I suspect nth selector caches - going to check it over the weekend

The problem is that in the previous_sibling_element / next_sibling_element implementation the logic stops if a sibling is not an element node (e.g. text or comment), but it should look until an element node occurs or no sibling node at all.

So, if you remove all new lines & indents from the example (from the table element), it will work with the current implementation

The fix is released in 0.13.0

Thanks so much for fixing this. I appreciate the incredibly quick response and fix ❤️

You are very welcome! :)