What does a[href^="..."] do in CSS?

Solution 1:

a[href^="http:"] 

Selects an <a> element whose href attribute value begins with http:.

For example:

p[title^="para"] {background: green;}

Will match the following:

<p title="paragraph"> This paragraph should have a green background. </p> 

Solution 2:

That's one of the substring-matching attribute selectors available in CSS3. It matches links with href attributes whose values start with the given string.

To illustrate, we'll take your example CSS, and add some defaults:

a {
   background: none; padding: 0 1em;
}

a[href^="http:"] {
   background: url(img/keys.gif) no-repeat right top;
}

a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
   background-image: none; padding-right:0;
}

And style the following HTML with it. The output styles are summarized in comments:

<ul>
    <!-- [1] No background, 1em left and right padding -->
    <li><a href="/index.php">My site's page</a></li>

    <!-- [2] Background, 1em left and right padding -->
    <li><a href="http://example.com">External link</a></li>

    <!-- [3] No background, no right padding -->
    <li><a href="http://mysite.com">My site's base URL without www</a></li>        

    <!-- [4] No background, no right padding -->
    <li><a href="http://www.mysite.com">My site's base URL with www</a></li>

    <!-- [5] No background, no right padding -->
    <li><a href="http://mysite.com/page.php">A page in my site with base URL</a></li>
</ul>

What's happening?

1. Selected by a only
   This element's href="/index.php" attribute doesn't start with http: or the other values.

   There is no background, but there is left and right padding.

2. Selected by a[href^="http:"] only
   This element's href="http://example.com" attribute starts with http: but doesn't start with http://mysite.com.

   There is both left and right padding, and a background image.

3. Selected by a[href^="http:"] and a[href^="http://mysite.com"]
   This element's href="http://mysite.com" attribute starts with http: and further starts with http://mysite.com.

   Since the second selector overrules the first selector, the background image and right padding are removed.

4. Selected by a[href^="http:"] and a[href^="http://www.mysite.com"]
   This element's href="http://www.mysite.com" attribute starts with http: and further starts with http://www.mysite.com (notice the www).

   Since the second selector overrules the first selector, the background image and right padding are removed.

5. Selected by a[href^="http:"] and a[href^="http://mysite.com"]
   This element's href="http://mysite.com/page.php" attribute starts with http: and further starts with http://mysite.com.

   Notice that, compared to the third link, the attribute in this one contains more than just the base URL; however, the ^= indicates that the attribute's value just needs to start with your site's base URL, as opposed to = which would mean "select links that only point to http://mysite.com". Therefore, this link is matched by the second selector.

   Since the second selector overrules the first selector, the background image and right padding are removed.

Solution 3:

Those are attribute-starts-with selectors, they'll select <a> elements with an href attribute starting with that value, e.g. a[href^="http:"] matches any anchors with an href starting with href="http:....", for example:

<a href="http://www.google.com">Test</a> <!-- would match -->
<a href="#element">Test</a>              <!-- wouldn't match -->

Solution 4:

For every link which's "href" parameter starts with "http:", set the background to a key image (without repetition, positioned in the top-right corner).

For every link which's "href" parameter starts with "http://mysite.com" or "http://www.mysite.com", set the background image to nothing (and the right-side padding to 0).

To me, this seems like a clever CSS trick that will make your users aware of when they are leaving your website through an external link by displaying a key image.

(I think I'll use it in the future. :)