Create a Discussion

Defining CSS Attribute Selectors

Aaron Simmonds posted 2016-03-04 15:37:49

Hi Guys,

I'm in the process of setting up a email template for a client and after doing my research i've come across various different ways of defining CSS attribute selectors. Just wondering what peoples thoughts are on the subject and if one is more best practice than the others:

Examples:

*[ class="name" ] - (speech marks)

*[ class=name ] - (no speech marks)

*[ class=~"name" ] - (use of tilda)

Mark Robbins replied 2016-03-04 16:59:17

The speech marks aren't required, doesn't cause any issues as fas as I'm aware to remove them.

The tilda means 'exactly contains'

So if you had
class="foo bar"

[ class="foo" ]{} would not match it
[ class="foo bar" ]{} would match it
[ class~="name" ]{} would match it

You can also use $= ends with ^= starts with and *= loosely contains (this will match class-"foo" and class="fooooo"

Reply to Mark Robbins

Aaron Simmonds replied 2016-03-07 09:29:35

Thanks for clarifying.. definitely food for thought,

The Litmus Community is the place for email designers and marketers to learn, grow, and educate each other about everything email.

Defining CSS Attribute Selectors

Sign in to Community

Join the Litmus Community

Sign up to Community

Get more out of your Litmus account

Forgot password