Creative uses of the CSS :target pseudo class selector

Creative uses of the CSS :target pseudo class selector

CSS3 has introduced a handful of new pseudo-class selectors. In this article, let's first have a look at the :target selector, then let's see how useful it can be on a daily basis for a front-end developer.

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:

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

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

If a user access the 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 demoRelated 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 demoRelated 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 demoRelated 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 demoRelated 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 demoRelated article