Over CSS :target
De CSS-selector :target werkt op HTML-elementen die de target (doel) zijn van een <a>-tag (anchor). Een doelelement heeft een id. De anchor-tag verwijst naar een bookmark binnen het document. Voorbeeld:
<style>
section {
opacity:0; /*-- niet zichtbaar --*/
}
section:target {
opacity:1; /*-- zichtbaar --*/
}
</style>
<a href="abcd">Hoofdstuk 1</a>
<a href="efgh">Hoofdstuk 2</a>
<a href="ijkl">Tekst verbergen</a>
<section id="abcd">
Hoofdstuk 1
Bla bla bladibla
</section>
<section id="efgh">
Hoofdstuk 2
Ook bla bla bladibla
</section>
Aanvankelijk zie je geen tekst van de hoofdstukken, want de opacity van de twee sections staat op nul.
Als je op de link "Hoofdstuk 1" klikt, wordt de <section id="abcd"> target (doel). De CSS
van section:target wordt actief en zet de opacity op 1. De tekst van hoofdstuk 1 wordt zichtbaar.
Als je vervolgens Hoofdstuk 2 aanklikt, verschijnt de tekst van hoofdtuk 2, die staat in <section id="efgh">. De tekst van hoofdstuk 1 verdwijnt, want die is geen target meer.
Door een klik op Tekst verbergen verdwijnt de tekst, om het even of het Hoofdstuk 1 of Hoofdstuk 2 is. Beide zijn geen target meer. Er verschijnt geen nieuwe tekst, want id="ijkl" bestaat niet.
De elementen die target kunnen zijn moeten een id hebben. Met name werkt het niet.
In CSS kun je :target koppelen aan een HTML-element-type, zoals <section>, <article>,
<div>, <p> en <image>.
Koppelen aan een klasse kan ook, bijvoorbeeld .aaaa:target { … }
Het is ook mogelijk om alle elementen die target kunnen zijn in één keer te benoemen: :target { … }.
Deze techniek wordt gebruikt in het item CSS-menu met schuivende panelen IV. Andere voorbeelden vindt je op w3schools.com.
