To get started, download the exercise files for this chapter at stunningcss3.com and open selectors_start.html in your code editor of choice. Its CSS is contained in a style element in the head of the page. So you can also use your final page from Chapter 3 as your starting point here. Throughout the page, there are links to documents to download, in these file types:PDF _ MOV
In some cases, we’ve indicated the file type to the user by putting it in parentheses at the end of the link text, such as “Map of trip locations (PDF).” we want to give users a heads-up that clicking on certain links might launch additional applications, like Acrobat Reader, or prompt them to save a file. But we are human being—we may not remember to add this file-type notice at the end of every link that could benefit from it. Or what if this page was part of a content-management system (CMS), and my non-technical client was adding links? He might be even less likely to remember to add these friendly file-type warnings.
A more foolproof way to add some sort of file-type indicator is to use attribute selectors, which would have the browser take care of it automatically.
Every link ends with a file-type extension, so we can use the “end of the value” attribute selector to examine the extension and add the appropriate icon as a background image on the a element.
First, prepare the a elements inside the file-download lists to have background images added to them:
This makes the links block elements with a minimum height matching the height of the icon images, so the icons won’t ever get cut off. It also adds left padding to create empty space for each icon to sit in. Each icon background image will display only once (no-repeat) and be positioned three pixels down from the top of the link (0 3px) to align it with the top of the text.
Now we can add the attribute selectors to target each file type extension:
The href$= part of each attribute selector tells the browser “find every href attribute that ends with,” and then the values in quotation marks, such as .pdf, give the ending attribute value to match against.
When the browser finds a match, it applies the background image indicated, adding appropriate icons to all the links .
Each link now has an icon beside it to match its file-type extension.
Alternative Icon Ideas
We’re finished with the styling for the link icons, but you could take attribute selectors even further if you wanted to.
SAY IT INSTEAD OF SHOWING IT
The icons are a nice little hint to help your users, but if you wanted to be even more obvious and explicit, you could use generated content to write out the file-type extension at the end of each link instead of or in addition to the icons.
You’d first need to make sure that this information wasn’t already manually written in each link. Then, you could add the following rule, for example, to write out “(PDF)” after each link to a PDF file:
COMBINING MULTIPLE ATTRIBUTE SELECTORS
As with almost any other type of selector, you can combine multiple attribute selectors into one to give you even more fine-grained control over what you want to target. For instance, what if you wanted to show the photo icon for links to PNG images, but a chart icon for links to PNG images that also happened to be charts? Depending on how your images are named, this selector would work:
This selector tells the browser “find all links that have ‘.png’ at the end of their href attributes and have ‘chart’ somewhere in the href attribute.”
So all of the following links would get matched:
Fixing IE 6 IE
6 is the only major browser that doesn’t support attribute selectors and doesn’t show the icons. The only way to work around this is to add a script that provides support for attribute selectors.
ADDING AN IE-FIXING SCRIPT
One such script that makes the advanced selectors already present in your CSS work is Dean Edwards’ script, confusingly named IE7. You can download the script and link to that local copy, or you can link to the public copy hosted on Google Code. Linking to the public copy has the advantage that visitors to your page may already have the script in their cache if they’ve visited another site linking to it, making the page load faster for them.
Add a link to the public copy of the script in the head of the page, inside an IE 6-only conditional comment:
The script makes IE 6 understand the attribute selectors so the icons show up, but it does weird things to the spacing and wrapping of the links. To fix these issues, we need to make the links inline-block and set white-space to nowrap, but this causes minor problems in other browsers. So, we’ll use the same conditional comments html tag trick that we used earlier to create a rule that only IE 6 can read.
Go to the opening html tag of the page, and change it to the following
Now you can add an IE 6-only rule:
The article “Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery” gives an example of how to use the attribute selectors available in jQuery to create a custom script to add icons to links.
CSS3 Related Interview Questions
|XML Interview Questions||CSS3 Interview Questions|
|HTML Interview Questions||Dreamweaver Interview Questions|
|UI Developer Interview Questions||CSS Interview Questions|
|CSS Advanced Interview Questions||WordPress Interview Questions|
|Pure.CSS Interview Questions||XHTML Interview Questions|
The Css3 Lowdown
Styling Images 150 And Links By Type
Improving Efficiency Using Pseudo-classes
Different Screen Size, Different Design
Flexing Your Layout Muscles
All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd
Wisdomjobs.com is one of the best job search sites in India.