how to highlight currently opened page link in css - html

Question

I have a set of links in the left navigation panel. And I wanted to highlight the opened link. I'm using css for my website.
HTML code:
<div id="LEFTmenu">
<ul>
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
CSS code:
#LEFTmenu {
line-height:30px;
width: 200px;
float: left;
margin-top: 10px;
background-color: #FFFFFF;}
#LEFTmenu ul {
padding: 0;
margin: 0 0 20px 15px;
list-style: none;
list-style-type: none;
font-size: 14px; }
#LEFTmenu ul li a:link, a:visited {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #333; }
#LEFTmenu ul li a:hover {
color: #CC3366; }
#LEFTmenu ul li a:active {
color: #33FFFF; }
By using a:active, the link will have this property only for a very short time of just one click on the link. But I'm expecting the link to be highlighted while its page is opened. Is there such feasibility in CSS?

Answer 1

The :active pseudo class is only for elements tht are currently in the selected stage. For example in the case of a button, the button could be red color , when you hover the mouse over it it turns to blue. Here you use the :hover pseudo class. Now when you click the button ( just left click down, dont release it yet) the button turns green. Now that is the :active pseudo class.
for what you are wanting, where the link is continuously highlighted when the page is opened and displayed, you can do it either using javascript or just plain css.
the simplest way, the plain css way is just have a class called "highlighted" and set some css property like background ans stuff like,
.highlighted{
background-color:#000;
color:#fff;
}
just apply the "highlighted" class to the link you want.For example, if you are on link2.html page then you want the "link2" in your ul list to be highlighted. So inside your link2.html page, in your ul element referencing the links, just apply the class to link2 like..
.highlighted{
color:#fff;
background-colo:#000;
}
<div id="LEFTmenu">
<ul>
<li>Link1</li>
<li class="highlighted">Link2</li>
<li>Link3</li>
<li>Link4</li>
<li>Link5</li>
</ul>
</div>
This is the easiest css solution for what you want to achieve.
Now the javascript version of doing this is not difficult by any means, but a little more complicated than the just css approach. I say it is a little more complicated because you are dynamically going to manipulate the element properties. Now you do have to watch out for what you are doing bcause you might accidentally change some DOM property that you do not want to change but altogether it is not difficult.
now for javascript approach now you can decide to do this in native javascript or use some jquery or other libraries. Jquery makes writing the code simpler but you have to link the jquery source to you html file, which adds memory/file size to your page. This part I will let you decide what you want to do and how you want to proceed.
HopefullyI have shed some light into what you are wanting to do. Good luck