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:

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 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

Enjoyed this article? Please consider donating: 3FVR5qaxYV8yAgNUUS7FC3o8c54YfDR5zK