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

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.