The Trick of Target Selector

One of the selectors introduced in CSS 3 was the :target pseudo-class selector. But what is a pseudo-class? A pseudo-class represents a state of a selector like :hover, :active, :first-child and their name starts with a single colon(:). So :target will also represent a state of a selector or an element.

Now we know that URLs can have a section focused using the # character mostly using an anchor link. For :target, the element being linked to it is the target element. Or let me rephrase it for a simpler explanation. The :target selector can be used to style the current active target element mention in the URL by the # character.

The following example might help better. Suppose we have a website URL and the following tag in our HTML code:

<div id="example">Example</div>

Plus the following CSS code:

div:target {
  color: blue;

The div will have the default colour for the text. But if we change the URL to, the text of the div will change to blue colour and that is the trick our :target is all about.

This seems so simple but numerous wonders can be achieved with it like photo gallery, modal boxes etc.