Any easy way (with CSS maybe) to highlight a section of a web page based on the the bookmark (site.com/page.htm#bookmark

Question

I want to link to a section of a page using a bookmark site.com/Page.htm#Bookmark)

When the page is rendered, I'd like to highlight everything within the #Bookmark (Anchor)

E.g.,

Employee 1 , blah blah <---this text would be highlighted.

Naturally there are a dozen or so different bookmarks.

I was thinking maybe I could assign a CSS style to the Active link state or something similar.

Any ideas?

Answer 1

You can do this with the :target selector:

http://www.w3.org/TR/css3-selectors/#target-pseudo

Example: http://www.mysite.com/#foo

<div id="foo">Here is a message</div>

#foo:target {
    background: yellow;
}

More info: http://carsonified.com/blog/features/css/stay-on-target/

Unfortunately it does not work in IE6/7.