CSS3: target for #/hashes

CSS3: target for #/hashes

by Alex

HTML

<div>
    <p id="/red">I really like the :target pseudo-selector. It enables you to style the target of a so called skip-link. For instance when you link to a section in an article: you could highlight the header of that section. Or you can use it for toggling simple drop-down menus — the ones you see a lot on small screens. But you can also use it to create a completely different layout.</p>
    <p id="/blue">Now if you add #/blue to the end of the URL, the layout changes. The site now looks like <a href="#/blue">this</a> or <a href="#/red">this</a> or <a href="#">that</a>.</p>
</div>

CSS

body {
    font-family:Helvetica;
    font-size:20px;
    padding:20px;
}
p {
    -webkit-transition: background 1s linear 0s, color 1s linear 0s;
    -moz-transition: background 1s linear 0s, color 1s linear 0s;
    -o-transition: background 1s linear 0s, color 1s linear 0s;
    transition: background 1s linear 0s, color 1s linear 0s;
}
#\/red:target {
    background-color:#f00;
}
#\/blue:target {
    color:#fff;
    background-color:#00f;
}