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 http://www.abc.com/index.html#myHash 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.

 

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s