Geek Answers Handbook

How and why does it work?

This Motyar guy from India from the website: http://motyar.blogspot.no/2011/02/handling-onclick-event-with-css.html showed a very nice clean css method to hide and show the div. However, I cannot figure it out. Here is the code and please explain this to me, newbies.

HTML (NOT MY CODE):

<div id="lightbox"> <a href="#">Hide me</a><br /> Hi!! <br /> i am the lighbox </div> <a href="#lightbox" >Show the lighbox</a>

CSS (NOT MY CODE):

 #lightbox { display:none; } /* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */ #lightbox:target { display:block; }

Please explain this to me comprehensively. Thanks:)

+4
source share
3 answers

In CSS #lightbox :target placed after the CSS token, say, for example, #lightbox means that the internal code of your #lightbox:target rule will be evaluated if and only if your page URL is added using #lightbox for example, http://www.stackoverflow.com/#lightbox . In this case, the browser will evaluate the following code:

 #lightbox:target { display:block; }
+2
source

From Selection W3 Selection to Level 3 Recommendation :

Example:

p.note: target

This selector is the p element of the class annotation element, which is the target element of the reference URI.

So, when you click #lightbox , lightbox -Element becomes the target of your URI.

The pseudo-selector can identify this and apply the appropriate style.

+1
source

Key:: :target pseudo selector. It is suitable for active anchors ( #lightbox in this case).

You can find out more about this here: http://css-tricks.com/on-target/

0
source

More articles:


All Articles