target pseudo class in css3

Basically the :target pseudo selector in CSS matches when the hash in the URL and the id of an element are the same.

we can define ‘:target’ for general purpose.

We can also use it with other css selectors to define specific matching rules.

So if we have a and in the css we have myHash:target{something}

Then the something will be applied to the id=myHash div or whatever container when the anchor <a href=’#myHash‘></a> is clicked.



Psuedo class is good for creating css only modal window. And here is the fiddle.

W3School has some good example about :target.

some other example in css-tricks

This is an interesting way of building modal with JS using IIFE and in an OO way.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s