<p>I want to link to bookmark on a page  (mysite.com/mypage.htm#bookmark) AND visually highlight the item that was bookmarked (maybe having a red border). Naturally, there would be multiple items bookmarked. So that if someone clicked on #bookmark2  then <em>that</em> other area would be highlighted).  </p>

<p>I can see how to do that with .asp or .aspx but I'd like to do it more simply than that. I thought maybe there was a clever way to do it with CSS.</p>

<p>WHY I'm interested:
- I want to have our programs link to a shopping page that lists all the programs on it. I'm using a bookmark so they're jumping to the particular program area (site.com/shoppingpage#Programx) but just to make it <em>obvious</em> I'd like to actually highlight the page being linked to.</p>

[{'answer_id': 54257, 'author': 'GateKiller', 'author_id': 383, 'author_profile': 'https://Stackoverflow.com/users/383', 'pm_score': 0, 'selected': False, 'text': "<p>I guess if you could store this information with JavaScript and cookies for the functionality of remembering the bookmarks and even add a splash of Ajax if you wanted to interact with a database.</p>\n\n<p>CSS would only be able to do styling. You would have to give the bookmarked anchor a class found in your CSS file.</p>\n\n<p>CSS also has the a:visited selector which is used for styling links found in the browser's history.</p>\n"}, {'answer_id': 54278, 'author': 'Kevin', 'author_id': 2678, 'author_profile': 'https://Stackoverflow.com/users/2678', 'pm_score': 2, 'selected': False, 'text': '<p>Use your favorite JS toolkit to add a "highlight" (or whatever) class to the item containing (or contained in) the anchor.</p>\n\n<p>Something like:</p>\n\n<pre><code>jQuery(location.hash).addClass(\'highlight\');\n</code></pre>\n\n<p>Of course, you\'d need to call that onready or click if you want it triggered by other links on the page, and you\'ll want to have the .highlight class defined.  You could also make your jQuery selector traverse up or down depending on the container you want highlighted.</p>\n'}, {'answer_id': 54326, 'author': 'Pat', 'author_id': 238, 'author_profile': 'https://Stackoverflow.com/users/238', 'pm_score': 4, 'selected': True, 'text': '<p>In your css you need to define </p>\n\n<pre class="lang-css prettyprint-override"><code>a.highlight {border:1px solid red;}\n</code></pre>\n\n<p>or something similar</p>\n\n<p>Then using jQuery, </p>\n\n<pre><code>$(document).ready ( function () { //Work as soon as the DOM is ready for parsing\n    var id  = location.hash.substr(1); //Get the word after the hash from the url\n    if (id) $(\'#\'+id).addClass(\'highlight\'); // add class highlight to element whose id is the word after the hash\n});\n</code></pre>\n\n<p>To highlight the targets on mouse over also add:</p>\n\n<pre><code>$("a[href^=\'#\']")\n    .mouseover(function() {\n        var id  = $(this).attr(\'href\').substr(1);\n        $(\'#\'+id).addClass(\'highlight\');\n    })\n    .mouseout(function() {\n        var id  = $(this).attr(\'href\').substr(1);\n        $(\'#\'+id).removeClass(\'highlight\');\n    });\n</code></pre>\n'}, {'answer_id': 55530, 'author': 'chrisofspades', 'author_id': 2614, 'author_profile': 'https://Stackoverflow.com/users/2614', 'pm_score': 3, 'selected': False, 'text': '<p>You can also use the <code>target</code> pseudo-class in CSS:</p>\n\n<pre><code>&lt;html&gt;\n&lt;head&gt;\n\n&lt;style type="text/css"&gt;\ndiv#test:target {\n background-color: yellow;\n}\n&lt;/style&gt;\n\n&lt;/head&gt;\n&lt;body&gt;\n\n&lt;p&gt;&lt;b&gt;&lt;a href="#test"&gt;Link&lt;/a&gt;&lt;/b&gt;&lt;/p&gt;\n\n&lt;div id="test"&gt;\nTarget\n&lt;/div&gt;\n\n&lt;/body&gt;\n&lt;/html&gt;\n</code></pre>\n\n<p>Unfortunately the target pseudo class isn\'t supported by IE or Opera, so if you\'re looking for a universal solution here this might not be sufficient.</p>\n'}]
['https://Stackoverflow.com/questions/54237', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/4906/']