The Trick of Target Selector

The Trick of Target Selector

June 19,2021 by MAhmadZ

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 step4wd.com/dummy.html 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 step4wd.com/dummy.html#example, 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.