:target pseudo-class is one of those amazing CSS3 features. It matches an element that’s the target of a identifier in the document’s URI.
This identifier in a URI contains a “#” character followed by an identifier name that matches the value of an id attribute of an element within the document.
Because we’re talking about CSS3, it’s supported by all modern browsers excluding IE, from 6 to 8. Disappointing as usual, but this fact shouldn’t stop you using it. However, IE9 supports the
How can you use :target?
This pseudo-class can be styled, just like we use to style the :hover, :active or :focus pseudo-classes on links. Much like the previous ones, :target is used during certain interactions with the website. Specifically, when applied to a fragment identifier as in this example:
Further, I am going to make an example of when and how to use :target. The purpose of the next demo is to show you that using :target can improve your website usability.
The HTML markup
Below you have a list of 4 links and also the same amount of blocks. You may notice that each “group” has an unique id as an identifier.
The following rows will style the content to get the desired effect, which is to show the current identifier (in this case a shadow will surround the box).
Below you can find the result, when a list element it’s clicked, the corresponding block will look as active.
I hope you enjoyed this quick tutorial and I hope you found it useful! Now I’m looking forward to find out your opinion about this subject.
Have you used the :target pseudo-class on your projects? Or you indend to use it in your future projects? Let us know!