Attribute selectors in CSS
This is probably one of the most under-used features in CSS, which is strange since it is pretty cool. I have added a link in the bottom, where you can see it action.
CSS2 Selectors
a[class]
Match when the element sets the “class” attribute, whatever the value of the attribute.
a[class="popup"]
Match when the element’s “class” attribute value is exactly “popup“.
a[class~="popup2"]
Match when the element’s “class” attribute value is a space-separated list of words, one of which is exactly “popup2“.
a[hreflang|="dk"]
Match when the element’s “hreflang” attribute value is a hyphen-separated list of words, beginning with “dk“. The match always starts at the beginning of the attribute value.
CSS3 Selectors
a[href^='mailto:']
Match when the element’s “href” begins with the value “mailto:”
a[href$='.bmp']
Match when the element’s “href” ends with the value “.bmp”
a[href*='help']
Match when the element’s “href” contains the value “help“. Eg. (/pdf/help/index.html)
Recent Posts
“This is probably one of the most under-used features in CSS, which is strange since it is pretty cool.”
That’s because it doesn’t work in IE6. Unfortunately that’s a deal-breaker for now.
I am desperately looking for an answer for (to me) seems like an obvious question.
In CSS there are different ways to specify the same value. For example, I could specify the width of table as “5pc” or “60pt” which mean the exact same thing (12pt = 1pt). If I specify a selector
table[width=60pt]
will it still catch a table attribute whose previous style sheet specified its width as “5pc”? Or do I have to test each possible equivalent unit of measure (pc, cm, mm, in)?
This is particulary important for the 5 or 6 different ways to specify color.