Call (877) SITE-OPT (748-3678)

Code: Use CSS2 and CSS3.x techniques

From Chapter 7: CSS Optimization

You can match elements that have an attribute, or that have a certain attribute value. For example, the following rule:

div ul *[href] {color:red;}

looks for any element with an href attribute set, inside a ul, inside a div, and sets the color to red. You could use this to select elements inside a navigation bar, for example.

The most powerful CSS 3.x selector is the * selector, which looks for substrings anywhere in the attribute value:

<style type="text/css">
    a[href*="/services"] {color:green;} </style></head><body>
<p><a href="http://www.example.com/services/invisalign/">Invisalign</a></p>

You can look for strings at the beginning or end of attribute values. For example, to highlight all PDF files, you’d do the following:

a[href$=".pdf"] {background: url(pdflink.gif) no-repeat right top:padding-right:10px;}

To highlight all external links, you can look for any anchor that begins with http:, like so:

a[href^="http:"] {background:url(externallink.gif) no-repeat right top;padding-right:10px;}

This rule flags all absolute URIs with a background graphic that displays an external link image. It also flags internal links that are absolute, so you’ll need to filter all absolute links from your own site like this:

a[href^="http://www.example.com"], a[href^="http://example.com"] {background-image:none;padding-right:0;}
Copyright © 2002-2017 Website Optimization, LLC. All Rights Reserved - Free website speed test - Privacy Policy
Last modified: February 19, 2009.

Follow us on: Twitter, Google+, Facebook, Linked In