What does the following CSS do?

Question

Hi,

I have used css before and I came across the below css style dont have a clue what it does.

Thanks

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;
}

Answer 1

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"&gt;Test&lt;/a&gt; //would match
<a href="#element">Test</a>              //wouldn't match

Answer 2

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. :)

Answer 3

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> 

Answer 4

The rules say, according to the W3C docs:

• All anchors which have an href attribute that starts with http:
• All anchors which have an href attribute that start with http://mysite.com or http://www.mysite.com

Answer 5

It's an attribute selector.
The ^= part means that the href attribute of the anchor tags must begin with http: in your first example.

Answer 6

That's known as the attribute-starts-with selector, 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"&gt;External link</a></li>

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

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

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

What's happening?

1. Matched only by a
   Its 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. Matched only by a[href^="http:"]
   Its 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. Matched by a[href^="http:"] and a[href^="http://mysite.com"]
   Its 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. Matched by a[href^="http:"] and a[href^="http://www.mysite.com"]
   Its 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. Matched by a[href^="http:"] and a[href^="http://mysite.com"]
   Its 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.