View Full Version : Resolved How to make an active tab in nth-child css?

07-18-2011, 07:40 PM

I am using the following codes for making a navigation bar!

<div id="top"> -- This ID is basically a navigation bar

<ul class="topnav">
<li class="first">Home</li> ----- This Css Makes my Home as active tab always.
<li> About </li> ---- This is others tabs which I want to make it active when someone click on it not visited but active when someone opens a page!

Please help me to make other tabs active!

Testing Link! (www.t-clicks.com/test)

/* top navigation */
.topnav { z-index:99; margin:0px; padding:1px 0px; list-style:none; line-height:1; }

.topnav a { z-index:100; position:relative; display:block; text-decoration:none; }

.topnav li { float:left; width:auto; }

.topnav li a { padding:7px 13px 6px 13px; font-size:11px; font-weight:bold; color:#1e598e; line-height:18px; text-transform:uppercase; text-decoration:none; }

.topnav li a:hover, .topnav li a:active { background:#ffffff; color:#000000; text-decoration:none; }

.topnav li.first a { background:#FFFFFF; color:#000000; border-top: 2px solid red; }

.topnav .first { background-color: #FFFFFF; color: #FFFFFF; }

.topnav li ul li a, .topnav li ul li a:visited { background:#fff; width:140px; padding:7px 13px 6px 13px; color:#26b; font-size:11px; font-weight:bold; border-bottom:none; text-transform:uppercase; }

/* topnav indicator */
.topnav .sf-sub-indicator { display:none; }
.topnav li ul .sf-sub-indicator { background:url(images/icon-arrow-right.png) no-repeat; position:absolute; display:block; right:0.4em; top:0.9em; width:10px; height:10px; text-indent:-999em; overflow:hidden; }

ul.topnav li{
ul.topnav li a{
border-top:2px solid transparent;
ul.topnav li a:hover {
background:white; color:blue;

ul.topnav li:nth-child(1) a:hover {

border-top: 2px solid red;
ul.topnav li:nth-child(2) a:hover {

border-top: 2px solid blue;
ul.topnav li:nth-child(3) a:hover{

border-top: 2px solid green;
ul.topnav li:nth-child(4) a:hover{

border-top: 2px solid yellow;

07-18-2011, 07:48 PM
Your class shouldn't be "first", it should be "active" or "selected".

Simply add this class to the tab that the page is on.

07-18-2011, 07:50 PM
YOu mean like this?

<li class="select"> Home </li>
<li> About Us</li>

07-18-2011, 08:54 PM
I tried both none of them working!

I have made this code myself and I suspect that some are duplicate so please check the code as well there was no mistakes in it!

07-18-2011, 11:13 PM
Okay have a look at this:

<!DOCTYPE html>
<meta charset="utf-8">
* {
margin: 0;
padding: 0;
html {
font-family: verdana, sans-serif;
font-size: .825em;
nav ul {
margin: 2em;
list-style: none;
nav li {
float: left;
border: #ddd solid;
border-width: 1px 1px 1px 0;
nav li:first-child {
border-left-width: 1px;
nav li:hover {
background: #39f;
nav a {
padding: .5em 1em;
display: block;
text-decoration: none;
color: #06c;
nav li:hover a {
color: #fff;
nav .selected {
background: #06c;
nav .selected a {
color: #fff;
<li><a href="#">Home</a></li>
<li class="selected"><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">About</a></li>

Now change the LI which has the class #selected. See how it works? All you have to do is which LI has that class and your navigation changes.

07-19-2011, 12:10 AM
No Not working!

07-19-2011, 12:57 AM
I fixed It, thanks :) How Can I marked this resolve!

Chris Hick
07-19-2011, 07:25 AM
Unleash, just edit your opening post then click go advanced. Next, just use the prefix dropdown menu to select Resolved. ^_^

07-19-2011, 11:31 AM
Thanks :)