Using the :target pseudo-selector for alternative layouts

Sometimes I want to see all the images [of my site] on a grid [instead of the regular layout]. I could have created a PHP script that responded to a querystring. Or a small JavaScript. But instead I used the :target pseudo-selector. It’s very simple.

Neat trick by Vasilis: give the root html element an id and then – via CSS – change the layout if that id has become the target (viz. location.hash == id of the html element). Like so:

<html lang="en" id="g">
#g:target body {
    columns: 15em;
    column-gap: 0;
}

Using the :target pseudo-selector for alternative layouts →

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.