codescracker


css

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 :

http://codescracker.com/html/top.html#section_2A

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

*: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.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test