Last Updated: September 09, 2019

CSS Target Event

In CSS3 we were first introduced with a new feature called target pseudo class which makes CSS behavior more & more similar to JavaScript events.

target event

target pseudo class event occurs when the click event takes place on an Anchor that has another element id on its href attribute.

How it's done:

First of all we'll add a div.container with some images inside, for every image we'll set an ID attribute.

<div class="container">
  <img id="item1" src="images/item1.jpg" />
  <img id="item2" src="images/item1.jpg" />
</div>

After we set the images ids, we can add anchors that every one of them points through its href to a single image by its ID.
```
<a href="#item1" class="button">image 1</a>
<a href="#item2" class="button">image 2</a>
```

Lets write some CSS:

/* set size to our container */
.container{
  width:200px; 
  height:200px; 
  background-color:#ddd;
  margin-bottom:10px;
}
/* hide images & set image size*/
.container img {display:none; width:200px;}

/*set link to look like buttons*/
.button{
  font-weight:bold;
  text-transform:uppercase;
  display:inline-block;
  margin-right:10px;
  color:white;
  display:ibline-block;
  background-color:#5562c1;
  padding:10px;
  border:solid 2px #333;
  border-radius:10px;
  text-decoration:none;
  margin-bottom:10px;
}
.button:hover{background-color:#3f498e;}

Now the most important part is to add target styles (:target), which on click event will display the selected target image.
```
.container img:target{display:block;}
```