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

Question

I have used CSS before and I came across the below CSS style, don't have a clue what it does.
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

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 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>My site's page</li>
<!-- [2] Background, 1em left and right padding -->
<li>External link</li>
<!-- [3] No background, no right padding -->
<li>My site's base URL without www</li>
<!-- [4] No background, no right padding -->
<li>My site's base URL with www</li>
<!-- [5] No background, no right padding -->
<li>A page in my site with base URL</li>
</ul>
What's happening?
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.
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.
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.
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.
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.

Answer 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:
Test <!-- would match -->
Test <!-- wouldn't match -->

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

Answer 5

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 6

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