CSS code for changing the appearance of a tag being just clicked

Question

My desired output after I click on a particular option Hi, I'm not much good in css. I want to create a page where after clickin on a menu option, that option's border-bottom becomes blue. My current code is working for mouse hover and active but not after I leave the mouse. CSS Code:

body
{
    background-image: url("images/temp1.jpg");
    background-size: 100% 100%;
    background-attachment: fixed;
}

.container 
{
    text-align: center;
}

.center_div 
{
    margin-left: 12%;
    width: 75%;
    height: 100%;
    background-color: #ffffff;
}
td.mainmenu
{
    border-style: hidden;
    width: 15%;
    height: 10%;
    border-collapse: separate;
    border-spacing: 3%;
    padding:20px;
    padding-left:60px;
}
a.mainmenu
{
    text-decoration:none;
    color: black;
}
td.mainmenu:hover
{
    border-bottom-style:solid;
    border-bottom-color:blue;

}

HTML code:

<html>
<head>
<link rel="stylesheet" href="admin_template.css">
</head>
<body>
<div class="container">
  <div class="center_div">
 <table class="mainmenu">
 <tr>
<td class='mainmenu'><a class='mainmenu' href="">Sales</a></td>
<td class='mainmenu'><a class='mainmenu' href='out_of_stocks.php'>Out of Stocks</a></td>
<td class='mainmenu'><a class='mainmenu' href='refill_stock.php'>Refill Stocks</a></td>
<td class='mainmenu'><a class='mainmenu' href='enter_product.php'>New products</a></td>
<td class='mainmenu'><a class='mainmenu' href='admin_so.php'>Sign Out</a></td>
</tr>
<table>
<hr/>
</div>
</div>
</body>
</html>

`

possible duplicate of [CSS: How to change colour of active navigation page menu](http://stackoverflow.com/questions/11382664/css-how-to-change-colour-of-active-navigation-page-menu) — xDaevax, Dec 29 '14 at 21:15
This article also might be relevant: http://stackoverflow.com/questions/7566238/how-to-make-css-aactive-work-after-the-click — AndrewH, Dec 29 '14 at 21:17

score 1 · Answer 1 · answered Dec 29 '14 at 21:15

1

checkout CSS :visited Selector

answered Dec 29 '14 at 21:15

shawnzhu

7,233
4
35
51

Also, :visited would apply to all pages the user has visited, which adter a while, might be all of them, so not very useful. – user52889 Dec 29 '14 at 21:29
@rjmike29 yes, the `:visited` selector is for `a` element only which is for "visited" links. if you were pointing to the last one tab just clicked, it's out of the range of CSS selector which doesn't provide the semantic like *last one just clicked*. you need a new class named like `just-clicked` and assign it by using a little bit javascript. – shawnzhu Dec 29 '14 at 21:41
@rjmike29 take a look at [bootstrap tabs](http://getbootstrap.com/components/#nav-tabs), where a class `active` is used to represent the semantic *just clicked* – shawnzhu Dec 29 '14 at 21:55

score 0 · Answer 2 · answered Dec 29 '14 at 21:27

You could select the link which has a blank href:

a.mainmenu[href=""] { border-bottom-style:solid; border-bottom-color:blue }

But this is probably not a good idea. You would probably be better having your templating engine mark the active tab.

For instance if you're on the sales page, that first cell would read <td class="mainmenu active-tab" and you would add to your CSS file:

.active-tab { border-bottom-style:solid; border-bottom-color: blue }

That way, you can move the 'active tab' around using javascript if you need to later.

CSS code for changing the appearance of a tag being just clicked

2 Answers2