Is there a difference between
ul#mainNav li a:active {
color: #0312a4;}
and
ul#mainNav li.active a {
color: #0312a4;}
? From what I can tell, they do the same thing.
Yes difference is there
ul#mainNav li a:active {
color: #0312a4;}
in this, active is a pseudo class. It will apply color to a when event happen like click and hold (Eg: link,visited,hover,active etc.. are pseudo classes and always starts with :)
and
ul#mainNav li.active a {
color: #0312a4;}
in this, active is a class.(color will apply to anchor tag when the parent element li tag with active class only.)
Yes, both are completely different. Do check below snippet that will show you difference. Click to first text so it will show green color to you.
a:active means when anchor tag is active and li.active a class "active" is set to li tag.
ul#mainNav li.active a {
color: red;
}
ul#mainNav li a:active {
color: green;
}
<ul id="mainNav">
<li><a>Click Here</a></li>
<li class="active"><a>Click Here</a></li>
</ul>
Related
Go an LI holding an <A> - for the a:active state I want to change the CSS applied to the parent <LI> holding it... but I Cant work out the syntax in CSS....? Sure its a simple solution...?
<li>link</li>
li { background-color: yellow; }
li a:active { color: red; }
Above makes the link red on mousedown, but how can I also make the background colour of the <li> red when <a> is in active state?
UPDATE - not possible in CSS. jQuery solution is below:
$('li a').mousedown(function(){
$(this).parent().addClass('makeMeYellow');
});
I constantly fail to prevent a submenu item from inheriting the color of a top item. I know that similar questions have been asked already but am sorry to not be able to solve my problem using them.
CSS:
.Topmenu a{
color:black;}
.Topmenu.update a{
color:blue;}
.Submenu a{
color:black;}
Now the Menu itself looks like this:
<div id='Mainmenu'><ul>
<li class='Topmenu update'><a href='Link1'>Link1</a><ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul></li>
Now the submenu Link still is blue. What am I doing wrong?
Edit: Sorry for the confusion, it's a 2D-Menu, the Main Menu(Topmenu items) is horizontal with vertical Topmenu's (Submenu Item).
It is because of specificity. The .Submenu class is overwritten by .Topmenu.update. To avoid this, put .Topmenu.update in front of the .Submenu class.
.Topmenu a {
color: black;
}
.Topmenu.update a {
color: blue;
}
.Topmenu.update .Submenu a {
color: black;
}
<div id='Mainmenu'>
<ul>
<li class='Topmenu update'><a href='Link1'>Link1</a>
<ul>
<li class='Submenu'><a href='Link2'>Link2</a></li>
</ul>
</li>
</ul>
</div>
The problem is from your css. it should look like this;
.Topmenu a {
color: black;
}
.Topmenu, .update a {
color: blue;
}
.Submenu a {
color: black;
}
Notice the second block has a comma and space after the first class.
Although your HTML does have an error, it should still not affect the CSS from working right. and yes you have to fix your html it does not look right. so fix from #zowie's correction.
Let me know.
Use > for the first level:
.Topmenu a{
color:black;
}
.Topmenu.update > a{
color:blue;
}
.Submenu a{
color:black;
}
I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).
Try this:
.current_link a {
color: #00AD26 !important;
}
You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.
I have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<style>
li:hover, li.active {background:black}
</style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:
li:hover ~ li.active {
background-color: #f00; /* or whatever */
}
JS Fiddle demo.
But hovering over the third li cannot affect the same li.active element.
However, the following would work:
ul:hover li.active {
background-color: transparent;
}
JS Fiddle demo.
Try this:
ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:
A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any lis
This worked for me :
.dvchange1 {
color:#fff;
}
.dvOne:hover .dvchange2 {
color:#000;
}
<div class="dvchange1 dvchange2">
<span class="">
Hello
<span>
</div>
I have a list menu in Asp.net MVC Razor engine Masterpage. While trying some CSS on the menu, i see that the a:active property doesn't work as it should. I have cross check for reference on w3schools but still can't figure it out.
Following is the HTML on master page :-
<div class="nav">
<ul>
<li>Electronics</li>
<li>Computers</li>
<li>Clothing And Accressories</li>
<li>Office</li>
<li>Sports</li>
</ul>
</div>
Here's the CSS code :-
.nav ul li a:link { text-decoration:none; color:#3C7777; font-weight:bold; }
.nav ul li a:visited { text-decoration:none; color:#3C7777; }
.nav ul li a:hover { text-decoration: underline; color: #B5B5B5; }
.nav ul li a:active { text-decoration:none; color:#B5B5B5; }
Question :- The selected link is not show in the correct color, #B5B5B5, Why ??
Just to make sure you're not missing something - The :active pseudo-class only applies while you are clicking the link, and holding down the mouse button. It will not work after a page reload. (Just making sure, as it's a common mistake to make)