CSS nth-child selector do not work in Outlook/Gmail

Question

I'm sending mails when performing some actions, and some of them contain an HTML table. I wanted to color 1 line out of 2 in the table and for that I'm using the rule below :

tr:nth-child(even) {
  background-color: #c4409720;
}

In mailhog the output is perfect and it works but once looking at the email in Outlook or Gmail the rows are not coloured. Note that I don't know how many rows I'll have in advance since the mail template is populated with a list and a loop.

I guess the selector is not supported in those mail clients ?

So how could I achieve this in a way that will be understood by those mail clients ?

Thanks in advance !

Answer 1

As has been pointed out, :nth-child is not supported in Gmail and Outlook, or Yahoo or Protonmail (except PM iOS).

You could achieve this manually via the adjacent selector combinator (e.g. tr + tr), which adds most Gmails (not Gmail accounts without a Gmail address) as well as Yahoo (see https://www.caniemail.com/features/css-selector-adjacent-sibling/)

<style type="text/css">
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr, 
    tr + tr + tr, 
    tr 
    {background-color:red}
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr,
    tr + tr
    {background-color:transparent}
</style>

Tested with the following table structure:

        <table>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
        </table>