CSS attribute selectors allow developers to apply styles based on the attributes within a tag, rather than solely a tag name, id or class. This feature can be very useful for dynamically styling links according to the domain being linked to, the file type, a directory name within the link URL, and much more.
Why are these powerful features not in wide use yet? Largely because Internet Explorer versions 6 and earlier do not support attribute selectors. Other modern browsers such as IE7, Firefox, Opera and Safari do, however. Just be aware that there is a significant portion of the population that will not be able to see styles applied with attribute selectors, so avoid using them for anything vital to your site's basic functioning. But these tools can still be used to add useful enhancements for those using newer browsers.
Basic attribute selectors
This applies to all links with a title attribute, regardless of its value:
a[title] {
font-weight: bold;
}
This applies to all links with an href value of "index.html":
a[href="index.html"] {
font-weight: bold;
}
It is important to note that depending on the document’s doctype declaration setting, the attribute selectors may be case-sensitive. The above rule would not necessarily apply to links with an href of "index.HTML", for example.
Multiple attribute selectors can also be strung together. This applies to links with an href value of "index.html" and a title attribute with any value:
a[href="index.html"][title] {
font-weight: bold;
}
Selecting substrings
Now with CSS3, you can also use substring selectors to match a portion of an attribute.
^="string" will match the beginning of a string, handy for highlighting links based on the target's protocol, such as a secure server (https), ftp, or mailto. This would apply to all ftp links:
a[href^="ftp:"] {
font-weight: bold;
}
$="string" will match the end of a string. This is particularly helpful for highlighting links to specific file types. This would apply to links with an href value ending in ".pdf":
a[href$=".pdf"] {
font-weight: bold;
}
*="string" will match any portion within the string. This is good for highlighting links to a specific domain name or directory. This would apply to links with "amazon.com" anywhere in the href:
a[href*="amazon.com"] {
font-weight: bold;
}
Pseudo-classes
In addition, the attribute selector can be combined with any of the common pseudo-classes of :link, :visited, :hover, :active and :focus .
a[href="index.html"][rel]:hover {
font-weight: bold;
}
You can also use the :before and :after pseudo-classes to add icons or text to your links. For example, if you wish to add a small Adobe icon to links to pdf files:
a[href$=".pdf"]:after {
content: url(icon.gif);
}
As an alternative to the above method, if you did not want the icon to be part of the clickable link, use it as a background image instead, adjusting the padding as necessary to fit your icon:
a[href$=".pdf"] {
background: transparent url(icon.gif) no-repeat center right;
padding-right: 12px;
}
Or you can add the text "(pdf)" to the link text:
a[href$=".pdf"]:after {
content: "(pdf)";
}
It is important to note that the content string will only accept plain text, HTML tags will display as <tag>. However, you can apply CSS styling to the added content:
a[href$=".pdf"]:after {
content: "(pdf)";
font-weight: bold;
}
Negation pseudo-class
CSS3's negation pseudo-class adds another powerful option to attribute selectors. Unfortunately, these are not yet supported by IE7, although there are some workaround hacks.
This would apply to all links EXCEPT ones with an href of "index.html":
a:not([href="index.html"]) {
font-weight: bold;
}
We can also string together two or more "not" statements. This would apply to all links with an href of anything other than "index.html" AND no title attribute:
a:not([href="index.html"]):not[title] {
font-weight: bold;
}
Exceptions can be combined with regular selectors as well. This would apply to links with an href value of "index.html" but no title attribute:
a[href="index.html"]:not[title] {
font-weight: bold;
}
No comments:
Post a Comment