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
1 | a[class] |
Match when the element sets the “class” attribute, whatever the value of the attribute.
1 | a[class="popup"] |
Match when the element’s “class” attribute value is exactly “popup“.
1 | a[class~="popup2"] |
Match when the element’s “class” attribute value is a space-separated list of words, one of which is exactly “popup2“.
1 | 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
1 | a[href^='mailto:'] |
Match when the element`s “href” begins with the value “mailto:”
1 | a[href$='.bmp'] |
Match when the element`s “href” ends with the value “.bmp”
1 | 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.