Advanced Search

Css li iconified

/ Published in: CSS
Save to your folder(s)

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. The first list item uses the general attribute selector to look for any tags with an accesskey attribute and display an icon to alert users to its presence:
  2.  
  3. #test_selectors a[accesskey] {
  4. background: url('icon_key.gif') no-repeat 0 50%;
  5. text-indent: 20px;
  6. }
  7.  
  8. The second item looks for links with a type attribute value of ‘application/pdf’ (you do mark up links to documents using the type attribute, right?) using the exact attribute selector, then inserts an icon advising you of the destination document:
  9.  
  10. #test_selectors a[type='application/pdf'] {
  11. background: url('file_acrobat.gif') no-repeat 0 50%;
  12. text-indent: 20px;
  13. }
  14.  
  15. Finally, if you have a multi-language site you can link to another version using the lang attribute with the value of that language, then use the language attribute selector to apply that country flag:
  16.  
  17. #test_selectors a[lang|='fr'] {
  18. background: url('fr.gif') no-repeat 0 50%;
  19. text-indent: 20px;
  20. }

URL: http://www.css3.info/using-css-3-selectors-to-apply-link-icons/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.