CSS :target Trick

02-10-2019

The CSS :target trick works by matching the hash(#) in the URL, to the ID of an element.

Consider the following URL https://triss.dev/blog/2019/10/02/css-target-trick/#targetTrick

If the page contains an element with the ID of #targetTrick, the following selector will match and apply:

#targetTrick:target {
    background: PapayaWhip;
}

Click this link: #targetTrick and notice how the url now includes #targetTrick which matches the ID on the body element.

This means that the selector above is valid and the background-color is applied.

Examples

You can do lots of awesome things with this trick. Here are a few examples:

Sidebar navigation

See the Pen Tabs (checkbox-hack) by Tristan White (@triss90) on CodePen.

Fluid responsive navigation

See the Pen Tabs (checkbox-hack) by Tristan White (@triss90) on CodePen.