July 19, 2012 2 Comments
Since CSS2 developers have been able to use HTML element attribute values to identify Web page items for styling properties. With CSS3, this is extended significantly with the addition of substring matching within attribute selection. This allows you to define styling rules in a more dynamic and efficient way than before, by identifying elements with one or more chained substrings defined in your CSS code.
In this tutorial we will outline how to use these new substring matching attribute selectors. You are most likely to find attribute selectors of this kind useful when styling links, so that is what we will focus on here. There are three main attribute matching additions to CSS3, allowing you to specify substrings to match at the beginning or end of an attribute string, or anywhere within the entire string.
Create a Page
Let’s create a page to use our attribute selectors with. Use the following HTML5 outline:
<!DOCTYPE html> <html> <head> <style type="text/css"> </style> </head> <body> </body> </html>
We have a style section for our CSS3 code and will place some HTML content in the body section.
Create Some Links
Add the following sample links to your page for demonstration:
<div class="links"> <a href="http://developerdrive.com/section">Site</a> <a href="https://developerdrive.com/secure_section">Secure Site</a> <a href="docs/document.pdf">PDF Document</a> <a href="http://developerdrive.com/files/data.xml">XML File</a> </div>
These do not link to actual resources, so you may wish to replace them with your own. Let’s add some default link styling in the page head style section:
.links a:link {
padding-top:15px;
padding-bottom:10px;
padding-right:35px;
margin-right:30px;
font-weight:bold;
text-decoration:none;
font-family:sans-serif;
}
You can of course alter this code to suit yourself.
Apply the “Begins With” Substring Matching Attribute Selector
Let’s use the “begins with” selector to apply particular styling to any links connecting the user to secure URLs. We can do this by matching the “https” at the start of a link element’s “href” attribute value. Add the following to your CSS code:
a[href^="https"] {
background: url(secure_icon.png) no-repeat right;
}
You can use the following image:
The “^” character indicates that we want to match any “href” attributes for anchor elements starting with the specified string: “https”. We display the icon after the link text as we have the padding properties set to allow this.
Note: You can optionally use the “:after” pseudo-selector together with the “content” declaration, but I have personally found this to be a little unpredictable in certain browsers.
Test your page in a browser, this is how the secure link appears in Chrome:
Apply the “Ends With” Substring Matching Attribute Selector
Let’s use the “ends with” selector to style links to PDF documents using an icon, as we did with the secure link. Add the following to the style section in your page:
a[href$=".pdf"] {
background: url(pdf_icon.png) no-repeat right;
}
The “$” character specifies that the browser should match “href” strings ending with “.pdf”. You can use the following icon:
Here is the end result in Chrome:
Apply the “Contains” Substring Matching Attribute Selector and Chain it
Now let’s use the general “contains” selector. We can use this to identify anchor elements containing a specified string at any position. For example, you may want to style links to a particular section of your site, by identifying the name of the directory. Add the following to your CSS code:
a[href*="files/"] {
color: #333333;
}
This means that any link to a file inside a directory named (or ending with) “files” will be styled in this way. In this case we simply alter the color for demonstration. We can make this example a little more complex by chaining a couple of selectors together. Let’s say that we only want to apply the style declaration to XML files in the “files” directory. Extend your code as follows:
a[href*="files/"][href$=".xml"] {
color: #333333;
}
The color will only be applied to anchor elements whose “href” attribute contains the “files/” directory indicator and ends with the “.xml” file extension. Save your file and open it in a browser. Here are all of the links in Chrome:
Conclusion
We have here introduced the basic practice of using substring matching attribute selectors. As you can see, the possibilities are pretty huge. For example, some developers are using the practice to style external and internal links in different ways, although if your site uses a CMS this can be a little error-prone.
Although we have used anchor “href” attributes specifically here, remember that you can use the technique with any element or attribute. These extended attribute selection options enhance the cascading effect of your style declarations, and can provide greatly improved options for styling complex sites. Browser support for substring matching attribute selectors is also good, with all major relatively recent browsers already providing support.
See it in action here: http://www.developerdrive.com/demo/css_attribute_selectors/demo.html
BY SUE SMITH
YOU MAY ALSO LIKE
SHARE THIS ARTICLE
Add New Comment
Showing 2 comments