in magento 2 (2.2.6) email template css not working

Question

How to integrate css in email template? I tried and got this error:

CSS inlining error: DOMXPath::query(): Invalid expression in selector 100% in E:\xampp\htdocs\newmetal\vendor\pelago\emogrifier\Classes\Emogrifier.php on line 372

Answer 1

It looks like there's an issue with your CSS. Magento 2 doesn't support certain selectors for emails. You should review your CSS for any errors and check that you're not using any unsupported selectors.

Unsupported selectors (examples in parenthesis):
      * first-child (div:first-child)
      * last-child (div:last-child)
      * nth-child (div:nth-child(3n+1))
      * universal (*)
      * pseudo (a:hover, a:active, a:focus, span:before, span:after, etc)

Here's a more detailed answer explaining the issue: https://magento.stackexchange.com/a/132691/50223