Creative uses of the CSS :target pseudo class selector

What is :target?

Simply said, :target is a pseudo-class that represents the unique element with an id matching the fragment identifier of the URI of the document.

Consider an URI like this one:

http://example.com/example.php#references

Now, let’s say your stylesheet contains the following:

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

If a user access the http://example.com/example.php#references url, the element having the references id will be the target, so the styles defined above will be applied to that element.

Regarding browser compatibility, :target is fully supported by Chrome 4+, Firefox 3.5+, IE 9+, Opera 9.5+ and Safari 3.2+.

Enough theory for now, let’s have a look at what :target can do for you.

Modal Popup

Modal Popups are almost on every website: showing offers, offering to sign in for a mailing list, and so on. Did you know how easy it is to create a modal popup using pure CSS and the :target pseudo class selector? Check this article and demo to find out, you won’t be disappointed!
View demo – Related article

Summary with :target selector

Pretty much the most widespread use of the :target pseudo class selector. A good example is Wikipedia, which uses it to highlight the targeted reference.
View demo – Related article

Pure CSS animated slideshow

Remember the time when creating an image slideshow was a long task involving the mandatory use of JavaScript? Now with CSS3, it’s totally possible – and easy – to make a beautiful slideshow with no JavaScript. Here’s an impressive example of what you can do with :target.
View demo – Related article

Slide-Out Navigation Drawer

Slide-Out menus are very popular, mainly on mobile websites. In fact, they offer a simple and compact way to navigate on a given website. Using :target, those menus can be achieved in pure CSS. Definitely an interesting technique to check as every developer has to do those kind of menus nowadays.
View demo – Related article

Pure CSS3 Lightbox

Wow, here is an example of the full power of CSS3: a lightbox with multiple effects, done with no JavaScript and an interesting use of :target.
View demo – Related article