CSS3 Attribute Selectors

by horhey

HTML

<a href="/" title="Home">Home</a>

<a href="#anchor" title="Anchor">Anchor</a>

<a href="http://google.com/" title="Google">Google</a>

<a href="http://cnn.com/" title="CNN.com"></a>

<a href="http://www.gpoaccess.gov/usbudget/fy11/pdf/budget.pdf" rel="external" rev="2011" title="US Budget 2011">US Budget 2011</a>

<a href="http://www.gpoaccess.gov/usbudget/fy10/pdf/fy10-newera.pdf" rel="external" rev="2010" title="US Budget 2010">US Budget 2010</a>

CSS

a {
    display: block;
    margin: 1em;
}
a, a:link, a:visited, a:active, a:hover {
    color: blue;
    text-decoration: none;
}
a[href] {
    font-weight: bold;
}
a[href^="#"]:after {
    content:" ↓";
}
a[href^="http"]:after {
    content:" →";
}
a[href$=".pdf"] {
    padding-left: 20px;
    background: url("http://www.physio-pedia.com/blog/wp-content/uploads/2011/03/pdf_icon.gif") no-repeat 0 50%;
}
a[href$=".pdf"]:after {
    content:"";
}
a[href$=".pdf"]:not([rev="2011"]) {
    font-weight: normal;
    color: grey;
}
a:empty {
    display: block;
    background: #c00;
    color: #fff;
    padding: 3px 6px;
}
a:empty:before {
    content:"No link text! " attr(href);
}
a:empty:after {
    content:"";
}
::selection {
    background: yellow;
    color: black;
    text-shadow: none;
}