The target pseudo-class demo

also the negation pseudo-class, :not and ::before pseudo-element

by girlie_mac

HTML

<!-- The target pseudo-class demo, by @girlie_mac -->

<header id="top">
    <h1>Target Pseudo-class Demo</h1>
    <nav>
        <ul>
            <li><a href="#uno">Uno</a></li>
            <li><a href="#dos">Dos</a></li>
            <li><a href="#tres">Tres</a></li>
            <li><a href="#cuatro">Cuatro</a></li>
        </ul>     
    </nav>
</header>

<section id="uno">
    <h2>Kitteh 1</h2>
    <img src="http://placekitten.com/240/183"/>
</section>

<section id="dos">
    <h2>Kitteh 2</h2>
    <img src="http://placekitten.com/240/181"/>
</section>

<section id="tres">
    <h2>Kitteh 3</h2>
    <img src="http://placekitten.com/240/179"/>
</section>

<section id="cuatro">
    <h2>Kitteh 4</h2>
    <img src="http://placekitten.com/240/182"/>
</section>

<footer>
    <p><a href="#top">Go back to top</a></p>
</footer>

CSS

/* :target - simple example */

:target {
    background-color: #bada55;
}

/* :target - add a content, excluding the #top */

:target:not(#top)::before{
    content: "O HAI! ";
    font-family: "Impact", sans-serif;
    font-size: 3em;
    color: #fff;
    position: relative;
    top: 200px;
    left: 65px;
    text-shadow: 4px 4px 0 rgba(0,0,0,.5);
}



/* CSS for the rest of UI */

body {
    font-family: "Comic Sans MS", cursive;
}

a:active {
    color: #bada55;
}
 
nav {
    background-color: rgba(0, 0, 0, .5);
    padding: 4px;
    width: 100%;
    position: fixed;
    top: 0;
}
nav ul {
    list-style: none;
}
nav ul li {
    display: inline-block;
    text-transform: uppercase;
    padding: 0 1.45em;
}
nav ul li a {
    color: #fff;
}

header {
    padding-top: 2.5em;
}

section {
    padding: 1em;
}

JavaScript

/*
http://www.w3.org/wiki/CSS/Selectors/pseudo-classes/:target
*/