CSS3 gives incredible power for selecting elements within a page. You may not think this sounds very glitzy but trust me, it will make your life easier and you'll love CSS3 for it! I'd better qualify that bold claim…
You've perhaps used existing CSS attribute selectors to target rules. For example, consider the following rule:
img[alt] { border: 3px dashed #e15f5f; }
This would target any image tags in the markup which have an alt
attribute:
<img class="oscarMain" src="img/oscar.png" alt="atwi_oscar" />
You can also narrow things down by specifying what the attribute value is. For example, consider the following rule:
img[alt="atwi_oscar"] { border: 3px dashed #e15f5f; }
This would only target images which have an alt
attribute of atwi_oscar
. So far, so big deal we could do that in CSS2. What is CSS3 bringing to the party? Principally, three new "substring matching" attribute selectors…