Which of these CSS selectors "cancel" each other out?

Question

I found a neat example of Showing Hyperlink Cues with CSS. But in the CSS of the example, there are three separate styles that in my head should do mostly the same thing. Or at least, I should not have to use all of them in my opinion. But I'm not sure I get them all. Here they are:

/* all A tags whose REL attribute equals pdf */
a[rel='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

/*  all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

/* all A tags whose REL attribute contains the value pdf, seperated from other values with a space */
a[rel~='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

I'm thinking I can possible replace the first two with the last one, but again, I'm not 100% sure I understand how these works. Anyone care to shed some light on this?

My question is concretely this: Can I skip one or two of these and still get the same result on all my links?

Answer 1

At a first glance, the second one should also cover the first and third. But the problem is that there might be a browser that doesn't support the second version and thus needs the first one.

But why would you want these three? If the first should work, then stick with that one. If that one isn't supported, the others won't be supported for sure.

Answer 2

This one covers all use cases:

/*  all A tags whose REL attributes has the letters pdf somewhere mixed in*/
a[rel*='pdf'] { 
    padding-right: 18px;
    background: transparent url(icon_pdf.gif) no-repeat center right;
}

Since it matches pdf anywhere in the text.

Answer 3

I would almost make Venn diagrams of it...

All rel='pdf' are overruled by rel~='pdf'

All rel~='pdf' are overruled by rel*='pdf'

For example:

• [rel*='pdf'] will style rel="pdfdoc", while [rel~='pdf'] and [rel*='pdf'] will not
• Both [rel*='pdf'] and [rel~='pdf'] will style rel="pdf doc", while [rel='pdf'] will not
• All selectors will style rel="pdf"

Not all browsers can handle these CSS3 selectors, I think that's why rel='pdf' was added. You could remove rel*='pdf' if you don't want to style links that contain pdf in the rel attribute.