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 !

Does this answer your question? [web email zebra striped table impossible on Gmail, Hotmail, Outlook?](https://stackoverflow.com/questions/51045452/web-email-zebra-striped-table-impossible-on-gmail-hotmail-outlook) — David, Mar 16 '22 at 14:44
Outlook uses Word for rendering message bodies. See [Word HTML and CSS Rendering Capabilities in Outlook](https://learn.microsoft.com/en-us/previous-versions/office/developer/office-2007/aa338201(v=office.12)?redirectedfrom=MSDN) for more information. — Eugene Astafiev, Mar 16 '22 at 14:48
@David Not really since I can't use inline style. Remember, my rows are populated with a loop so I can't add a class on 1 out of 2 rows manually. That's why I tried to use a selector. — lbris, Mar 16 '22 at 14:50
See `:nth-child` support in email clients: https://www.caniemail.com/features/css-pseudo-class-nth-child/ — HTeuMeuLeu, Mar 16 '22 at 16:00

score 6 · Answer 1 · answered Mar 16 '22 at 21:40

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>

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

1 Answers1

Linked