Die target-Pseudoklasse

Einfache Implementierung mit statischer Farbänderung

by Jens Grochtdreis

HTML

<ul>
    <li><a href="#eins">Däumelieschen</a></li>
    <li><a href="#zwei">Die Störche</a></li>
    <li><a href="#drei">Der fliegende Koffer</a></li>
    <li><a href="#vier">Fliedermütterchen</a></li>
    <li><a href="#fuenf">Der Tannenbaum</a></li>
</ul>

<p id="eins">Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. Wenn ich gewußt hätte, daß Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben — da hätte ich wahrlich was Besseres schreiben können als diesen Stuß. Was sollen Sie jetzt von mir denken? Bisher haben Sie Konstantin Jacoby vielleicht für einen ganz ordentlichen Kreativen gehalten — und dann das hier! Ehrlich gesagt: Ich weiß auch nicht, wie mir das passieren konnte. Eine Worthülse nach der anderen! Buchstabe an Buchstabe — Inhalt aber gleich Null. Vermutlich geben Sie mir nie einen Auftrag, nachdem Sie das hier gelesen haben — da kann ich soviel Goldmedaillen haben, wie ich will. Dies ist der Beweis: Jacoby kann’s einfach nicht, Schluß aus! Zu meiner Entschuldigung kann ich nur sagen: Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. </p>
<p id="zwei">Wenn ich gewußt hätte, daß Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben — da hätte ich wahrlich was Besseres schreiben können als diesen Stuß. Was sollen Sie jetzt von mir denken? Bisher haben Sie Konstantin Jacoby vielleicht für einen ganz ordentlichen Kreativen gehalten — und dann das hier! Ehrlich gesagt: Ich weiß auch nicht, wie mir das passieren konnte. Eine Worthülse nach der anderen! Buchstabe an Buchstabe — Inhalt aber gleich Null. Vermutlich geben Sie mir nie einen Auftrag, nachdem Sie das hier gelesen haben — da kann ich...

CSS

ul{
    margin-bottom: 20px;
}

p{
    margin-bottom: 20px;
    padding: 5px;
}

p:target {
    background-color: #eee;
    padding: 20px;
}