Tuesday, 10 October 2017

The Target Pseudo-Classes in CSS

The target category of pseudo-class include one class only that is, :target. The :target pseudo-class is used to specify a target element. Now understand the concept of target element. When you create a Web page it may contain a Uniform Resource Identifier(URI) That refers to 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 URLs with fragment identifiers always link to a particular element within as HTML document and such element is known as the target element.
Consider the following URI:

http://example.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.
The following code snippet show an example of using the :target pseudo-class:

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

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

No comments:

Post a Comment