CODEWITHSUNDEEP
htmlcssnavbar
Shinji-san
Shinji-san

Reputation: 1001

Pseudo class for navbar not working

So I have a simple navbar which is not working for some reason. All the other links and pages work except for this one and I was wondering if someone would be able to spot an error in the following code. Notice how 'glob' is not yellow. I thought I had a more specific rule somewhere else which was overriding that rule but I don't think I have such a rule, I only have less specific.

#subnav {
	height: 10%;
	text-align: center;
	background-color: green;
	width: 100%;
}
#subnav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	width: 100%;
	font-weight: bold;
}
#subnav li {
	display: inline-block;
}
#subnav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
#subnav li a:hover {
	color: yellow;
}
#subnav li a:active {
	color: yellow;
}
<div id="subnav">
           	<ul>
    			<li> <a href="sam.html">Sam </a></li>
        		<li> <a href="sam.html">Sam </a></li>
    			<li> <a href="sam.html">Sam </a></li>
    			<li> <a href="sam.html">Sam </a></li>
            	<li> <a href="sam.html">Sam </a></li>
                <li> <a href="sam.html">Po </a></li>
                <li> <a class="active" href="glob.html">Glob </a></li>
                <li> <a href="sam.html">Donors </a></li>
                
    		</ul>
       </div>

Upvotes: 0

Views: 258

Answers (2)

Johannes
Johannes

Reputation: 67748

.active in your case is a class, not a state which would be adressable via a pseudo-selector. So your selector for it has to be

#subnav li a.active {
        color: yellow;
    }

(note the . instead of the :)

#subnav {
	height: 10%;
	text-align: center;
	background-color: green;
	width: 100%;
}
#subnav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	text-align: center;
	width: 100%;
	font-weight: bold;
}
#subnav li {
	display: inline-block;
}
#subnav li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
}
#subnav li a:hover {
	color: yellow;
}
#subnav li a.active {
	color: yellow;
}
<div id="subnav">
           	<ul>
    			<li> <a href="sam.html">Sam </a></li>
        		<li> <a href="sam.html">Sam </a></li>
    			<li> <a href="sam.html">Sam </a></li>
    			<li> <a href="sam.html">Sam </a></li>
            	<li> <a href="sam.html">Sam </a></li>
                <li> <a href="sam.html">Po </a></li>
                <li> <a class="active" href="glob.html">Glob </a></li>
                <li> <a href="sam.html">Donors </a></li>
                
    		</ul>
       </div>

Upvotes: 1

Dami&#225;n
Dami&#225;n

Reputation: 72

If you want to target the active class, you must use .active, not :active

so the rule will be:

#subnav li a.active {
  color: yellow;
}

The :active pseudo selector works a little different, here is a good explanation https://css-tricks.com/almanac/selectors/a/active/ But in your code you are adding the active class, and not using it on the css later. Hope this help you.

Upvotes: 1

Related Questions