'Is the attribute selector syntax for class names necessary in HTML emails in 2022?

I have an old email template contributed to by several people and it uses an attibute selector to select the class attribute value in addition to the normal class selector.

*[class=hide], .hide {
    display: none !important;
}

Every media query selector in the email is set up this way using square brackets in the first selector.

I'm trying to figure out if this usage can be removed in favor of only the regular dot syntax .className selectors.

Searching around, I can see that at least at some point, Yahoo Mail required this syntax within media queries.

Where is the attribute selector syntax for class names necessary in HTML emails in 2022?



Solution 1:[1]

It's not required. In fact, if you do it, there are risks depending on what is written that Gmail apps will delete your entire <style> block. You are right that it was an old Yahoo requirement (and that requirement has passed).

So definitely use normal classes, if you need embedded styles at all (you should rarely need them, since most of the styles need to be inline as many email environments don't support embedded styles - see https://www.caniemail.com/features/html-style/).

You might also like to lookup what other selectors are currently supported here: https://www.caniemail.com/search/?s=selector

Generally, we only need to use embedded styles for progressive enhancement.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nathan