CSS Target Pseudo-Class

« Previous Tutorial Next Tutorial »

The target category of pseudo-class includes one class only, that is :target.

The :target pseudo-class is used to specify a target element.

Let's understand the concept of target element. When you create a Web page, it may contain a Uniform Resource Identifier (URI) that refers to a location within a resource. This kind of URI ends with # followed by a number sign, which is also known as an anchor identifier or fragment identifier.

The URIs with fragment identifiers always link to a particular element within an HTML document and such element is known as the target element. Let's consider the following URI :

The preceding URI points to an anchor identifier, named section_2A, which is related to a target element in the HTML document. Such type of target element is represented by the :target pseudo-class.

Please note that if the URI has no fragment identifier, then the document has no target element.

CSS :target pseudo-class Example

The following code fragment shows an example of using the :target pseudo-class in CSS:

*:target { color:green; }
*:target::before { content: url(target_picture.jpg); }

In the preceding code fragment, the :target pseudo-class is used to make the target element green and insert the specified image before it.

CSS Online Test

« Previous Tutorial Next Tutorial »

© Copyright 2021. All Rights Reserved.