Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Can there be two or more :target selectors on one page without them interfering each other?

Can there be two or more :target selectors on one page without them interfering each other?

Problem

Is it possible to do it just with CSS? Every new :target seems to change the URI (.html#my target name comes here) and naturally that messes / resets the other previous behavior.

If only there would be a way to assign other :target to be "silent" or "invisible", so that it doesn't affect the URI and both :targets could function on their separate rights. Or would this defeat the whole purpose of this selector?

Problem courtesy of: Riviner

Solution

In a conforming HTML page, there can only ever be one :target element at a time.

The moment you navigate to another target, the hash fragment in the URI changes, making the previous one history (no pun intended) and no longer relevant to the URI. In the same way, :target will no longer apply to whichever element previously was the target element.

So, indeed, the behavior you're trying to achieve would defeat the purpose of the :target selector for HTML documents. There is currently no way to continue applying styles to it based on such behavior using only CSS.

Solution courtesy of: BoltClock

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Can there be two or more :target selectors on one page without them interfering each other?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×