css specifity between attribute selectors and user agent stylesheet in email design

Question

I am working on a responsive email template, and wish to apply display: block !important to 2 <td> elements in order to go from 2 columns to 1 column layout. Im using the following selector:

td[class="mainArticleContent"], 
td[class="mainArticleImage"] { 
    display: block !important;
}

The thing is: these styles are not applied when i view the email in the browser (safari or chrome). They still get the user agent style: display: table-cell;

I thought that an attribute selector would have higher specificity than UA stylesheets?

if i instead write:

.mainArticleContent, 
.mainArticleImage { 
    display: block !important;
}

Then the style get applied, and everything works as i want it to. But i am told that this can cause issues with YAHOO mail clients, as they might always show the mobile version, and that the attribute selector would be a workaround.

Can anyone shed some light on this problem for me?

Answer 1

You are searching for a class attribute that matches exactly that string. Since your string has something else in it, it doesn't match exactly. to match containing, you would use

td[class*="mainArticleContent"], 
td[class*="mainArticleImage"] { 
    display: block !important;
}

See http://css-tricks.com/attribute-selectors/