CSS Target Selector

Target selectors gave us neat feature. We can customize anything without use of JavaScript.

Now, in a similar manner, to iframe method, we can implement sub-pages by means of links.

Take a look at this CSS:

div.sub_page
    display: none

    &.default
        display: block

    &:target
        display: block

        & ~ div.default
            display: none

Note that Firefox has nasty bug that prevents print mode to use target selectors.

How it works

First of all, it relies on the same selector as previously mentioned spoiler toggle.

By default all elements are hidden. And element .default is shown.

When user changes target (i.e. hash is modified) target is being selected by CSS and becomes visible.

At the same time, .default becomes hidden if there is any selected target element.

Example

You can take a look at my site. Use navigation menu at the top to change sub pages.

Just in case here is gif.

It is a hack

It forces you to place .default at the end and there is no way to go around it. Well, if you need default element.