:target

In this chapter you will learn:

Definition for Selector:target
An example showing how to use :target CSS selector

Description

A fragment identifier can be added to a URL to navigate directly to an element based its id attribute. For example, example.html#myelement goes to the element whose id is 'myelement' in example.html.

:target selector matches the element that the URL fragment identifier refers to.

Example

<!DOCTYPE html>//  jav  a  2s .  c o  m
<html>
<head>
<style>
:target{
    border: 1px solid red;
    background-color: gray;
}
</style>
</head>
<body>
   <p>Click on the links in order to see the effect.</p>
   
   <p><a href="#p1">Paragraph 1</a></p>
   <p><a href="#p2">Paragraph 2</a></p>
   <br/><br/><br/><br/><br/><br/><br/><br/>
    

   <p id="p1">>Paragraph 1</b></p>
   <p>this is a paragraph.</p>
   <p>this is a paragraph.</p>
   <p>this is a paragraph.</p>
   <p>this is a paragraph.</p>
   <p>this is a paragraph.</p>
   <p id="p2"><b>Paragraph 2</b></p>

</body>
</html>

Next chapter...

What you will learn in the next chapter: