CSS pseudoklasse target

Beschrijving

Naast de structurele pseudoklassen introduceert CSS3 een aantal pseudo-classen waarmee je elementen op basis van andere criteria kan selecteren, o.a. link bestemmingen, elementen van de gebruikersinterface, en zelfs een inverse selector waarmee je een element kan selecteren op basis van wat het niet is!

We beginnen met de target pseudoklasse. Op websites is niet alleen een koppeling tussen de pagina's mogelijk, maar ook interne links naar specifieke elementen op één en dezelfde pagina. Een URI kan een verwijzing bevatten naar een unieke ID of een benoemd anker. Bijvoorbeeld, de volgende html:

<a href="#gedicht2">Voor het inslapen</a>

verwijst naar de volgende section:

<section id="gedicht2">

Met de pseudoklasse target kan je opmaakprofielen toepassen op het element wanneer de op de link (verwijzende URI) wordt gevolgd. In ons voorbeeld willen we dat het gedicht zichtbaar wordt wanneer de URI in het gedichten menu wordt gevolgd.

Om dat voor mekaar te krijgen maken we de gedichten in 'normale' toestand onzichtbaar. De html voor de gedichten ziet er nu zo uit:

<section id="gedicht2">
    <header>
        <h1>Voor het inslapen</h1>
    </header>
    <p>
        In deze kleine kamer vind ik soms nog vrede.
        <br/> al wat daarbuiten ligt heeft voor mij afgedaan;
        <br/> wat rest mij nog, dan ‘Krieg und Frieden’ lezend,
        <br/> tot mijn verwoeste dromen in te gaan?
    </p>
    <footer>
        <p><cite>Verzamelde gedichten</cite> 1941</p>
    </footer>
</section>

In de CSS beginnen we met een stijlregel toe te voegen die de <section> elementen onzichtbaar maakt:

article > section {
    width: 78%;
    float: right;
    margin-bottom: 1.5em;
    display: none;
}

Als je de website toont in de browser zijn de <section> elementen met de gedichten erin verdwenen:

Nu gaan we het gedicht dat getargeted wordt in de link van het menu zichtbaar maken. Daarvoor stellen we de pseudoklasse target in van het section element:

article section:target {
    display: block;
}

Als we de webpagina laden zien we geen enkel gedicht. Klikken we in het menu links op een titel van een gedicht verschijnt het gedicht rechts in beeld.

Maar we hebben een nieuw probleem. Door te springen naar een anker binnen dezelfde pagina, scroll't de pagina naar boven. Dat is het normaal gedrag voor een hyperlink binnenin dezelfde pagina. Maar hier willen we niet dat de pagina naar boven schuift. Er zijn verschillende manieren om dat standaard gedrag te wijzigen. Lea Verou gebruikt JavaScript in Change URL hash without page jump, 13 mei 2011. We gebruiken hier de truuk van Empêcher le scroll avec l’utilisation de :target.

Als we op een interne hyperlink klikken springt de tekst naar het anker waarna de hyperlink verwijst. Dat is het standaard gedrag. Vermits we willen dat de top van de pagina blijft staan waar ze staat gaan we de hyperlinks van het menu laten springen naar het begin van de pagina en we gebruiken een de algemene verwantschapselector om de sectie eronder waarin het gekozen gedicht staat te selecteren.

Bovenaan de pagina plaatsen we evenveel ankers als dat er keuzen zijn in het menu. We prefixen de id met ref-:

<span id="ref-gedicht1">De hand van de dichter</span>
<span id="ref-gedicht2">Voor het inslapen</span>
<span id="ref-gedicht3">De liefde slaapt in haar hart</span>
<span id="ref-gedicht4">Jaloezie</span>
<span id="ref-gedicht5">De vreemdeling</span>
<span id="ref-gedicht6">Polderland</span>
<span id="ref-gedicht7">Twee vrienden</span>
<span id="ref-gedicht8">Aan de dood</span>

Vervolgens wijzigen we het href attribuut van de hyperlinks in het menu zodat ze springen naar de ankers bovenaan de pagina:

<aside>
    <nav>
        <ol>
            <li><a href="#ref-gedicht1">De hand van de dichter</a></li>
            <li><a href="#ref-gedicht2">Voor het inslapen</a></li>
            <li><a href="#ref-gedicht3">De liefde slaapt in haar hart</a></li>
            <li><a href="#ref-gedicht4">Jaloezie</a></li>
            <li><a href="#ref-gedicht5">De vreemdeling</a></li>
            <li><a href="#ref-gedicht6">Polderland</a></li>
            <li><a href="#ref-gedicht7">Twee vrienden</a></li>
            <li><a href="#ref-gedicht8">Aan de dood</a></li>
        </ol>
    </nav>
</aside>

In het app.css bestand wijzigen we stijlregel voor de section elementen in het article element. Bij het laden van de pagina maken we alle gedichten onzichtbaar door het display attribuut in te stellen op none, en voegen een verticale scrollbar toe als het gedicht te lang is door het overflow-y attribuut in te stellen op scroll:

article > section {
    width: 78%;
    height: 68%;
    min-height: 68%;
    float: right;
    display: none;
    overflow-y: scroll;
}

Vervolgens moeten we het section element selecteren waarin het gedicht staat. Dat doen we met de de algemene verwantschapselector:

span#ref-gedicht1:target~article section#gedicht1,
span#ref-gedicht2:target~article section#gedicht2,
span#ref-gedicht3:target~article section#gedicht3,
span#ref-gedicht4:target~article section#gedicht4,
span#ref-gedicht5:target~article section#gedicht5,
span#ref-gedicht6:target~article section#gedicht6, 
span#ref-gedicht7:target~article section#gedicht7, 
span#ref-gedicht8:target~article section#gedicht8 {
    display: block;
}

Tenslotte maken we de ankers bovenaan de pagina waarnaar we springen onzichtbaar. We gebruiken daarvoor een klassenselector .ref-target. We beginnen met het class attribuut van de span elementen bovenaan de pagina in te stellen op .ref-target:

<span id="ref-gedicht1" class="ref-target">De hand van de dichter</span>
<span id="ref-gedicht2" class="ref-target">Voor het inslapen</span>
<span id="ref-gedicht3" class="ref-target">De liefde slaapt in haar hart</span>
<span id="ref-gedicht4" class="ref-target">Jaloezie</span>
<span id="ref-gedicht5" class="ref-target">De vreemdeling</span>
<span id="ref-gedicht6" class="ref-target">Polderland</span>
<span id="ref-gedicht7" class="ref-target">Twee vrienden</span>
<span id="ref-gedicht8" class="ref-target">Aan de dood</span>

Vervolgens maken voor deze klasse een stijlregel in app.css:

.ref-target {
    display: none;
}

Bronnen

1. Sara Soueidan, Using The CSS :target Selector To Create JavaScript-less UI Effects, January 21, 2015
2. Sara Soueidan, :target
3. What’s the Deal With :Target in CSS?
4. Empêcher le scroll avec l’utilisation de :target