I am trying to style a nav link to be a certain color when I am on that page.
HTML:
<nav>
<ul>
<li>Portfolio</li>
</ul>
</nav>
CSS:
nav a.selected {
color: #000;
}
The above code works. But if I removed the nav selector and just used
a.selected {
color: #000;
}
then the code doesn't work.
What if I wanted anywhere that I have an anchor element with a class "selected" to have #000?
The problem here seems to be the specificity of your selector.
Meaning:
nav a.selected {
color: #000;
}
Is not as exact as:
nav ul li a.selected {
color: #000;
}
Which holds more significance than the above.
So in order for your a.selected to work, You need to remove the nav before it, making it a global modulator just as the color you applied to your global anchor modulator, or apply the more specific selector from above (the second block):
a {
color: #6ab47b;
}
a.selected {
color: #000;
}
As a learner, I suggest You try and stick to the Mozilla Developer Network (MDN) Almanac.
Related
I have the following CSS:
.container a {
text-decoration: none;
font-weight: bold;
color: rgb(23, 230, 230);
}
.container a:hover {
text-decoration: underline;
color: white;
}
.container a:visited {
color: rgb(230, 0, 230);
}
And this html (piece of):
<div class="container">
...
<div class="menu">
<ul>
<li>
link1
</li>
<li>
link2
</li>
<li>
link3
</li>
</ul>
</div>
</div>
I don't understand why all the link options work, except for the color on hover: It does get underlined, but the color doesn't change. Does anyone know why?
When dealing with pseudo-classes on anchor elements, the order matters.
They must be in this order:
a:link
a:visited
a:hover
a:active
a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective! a:active MUST come after a:hover in the CSS definition in order to be effective!
source: http://www.w3schools.com/css/css_pseudo_classes.asp
There's a popular mnemonic you can use to remember this: LOVE HATE (lv ha).
For more details, see these references:
Why do anchor pseudo-classes a:link, :visited, :hover, :active need to be in correct order?
Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?
How To Remember The Order of Selectors: LOVE and HATE
jsfiddle link for everyone
.container a {
text-decoration: none;
font-weight: bold;
/* color: rgb(0, 230, 230); */
}
.container a:hover {
text-decoration: underline;
color: green;
}
/* .container a:visited {
color: rgb(2, 0, 230);/
} */
.test {
/* color: black; */
}
I loaded up your html and CSS into my sublime and it totally works fine. I toyed around with the colors a bit and everything is great. I loaded it up in fiddle to show you. When you have a list like you do, you want to target the list with some sort of class or ID to target them specifically. I commented some things out inside of the fiddle for you to see. enter code here
If you're finding your css is not taking not taking effect no matter what you do, it's worth adding !important parameters to tell the browser you designate your style attribute as having precedence.
.container a {
text-decoration:none !important;
font-weight: bold !important;
}
.container a:visited {
color: rgb(230, 0, 230) !important;
}
.container a:hover {
text-decoration:underline !important;
color: white !important;
}
Having said that, sometimes even with !important, still your style may be overridden. To unravel the CSS settings in the browser it's essential to use the inspector console. I think you may already be using the inspector, but if you want more info on this, please let me know.
I have the following HTML code
<div>
<nav>
<ul>
<li >A</li>
<li class="selected">B</li>
<li >C</li>
</ul>
</nav>
</div>
and the following CSS code
div nav ul li {
background: blue;
color: white;
}
div nav ul li.selected {
color: black;
}
running on JSFiddle.
The white foreground color for text content entries "A", "B", and "C" is only showing up on the bullets. This is because as this post illustrates, when an href attribute is present the color attribute is not inherited by the a tag.
However I don't understand how the color value for "div nav ul li a" interacts with
(the pseudoselectors)[http://www.w3schools.com/css/css_pseudo_classes.asp] "div nav ul li a:link", "div nav ul li a:visited", "div nav ul li a:hover", and "div nav ul li a:active".
Because a tags have default color set by the browser (unlike p,span,div) so you have to set the color for the a tag.
div nav ul li {
background: blue;
color: white;
}
div nav ul li a {
color: white;
text-decoration:none;
}
div nav ul li.selected {
color: black;
}
div nav ul li.selected a{
color: black;
}
The color is not inherited by the a element becasuse you stopped at the li level. div nav ul li
This will only get the li element not the a element. If you want the a element
div nav ul li a{
//CSS properties for the a element
}
2.The Psuedoselectors deal with an elements state and how it looks in that state. For instance if you wanted to change how your a element looks on hover you would do something like :
div nav ul li a:hover{
color: orange;
//CSS properties for the a element after hover
}
The reason why this div nav ul li { color: white; } doesn't work is because that's for text inside the li, you need to target the link like this div nav ul li a { color: white; }
Take a look at the updated fiddle. Here you can see the effects of the link pseudo classes.
And here's a good article about them. W3Schools isn't the best resource.
See this fiddle
Add
div nav ul li a {
color: white;
}
to your CSS
In your CSS, you gave a style only for the <li>s and not for the <a>s inside the <li>s.
Please see this fiddle to see the effects created by four of the pseudo-selectors.
a:link - to specify style for the unvisited link
a:visited - to specify style for the visited link
a:hover - to specify style on mouse over
a:active - to specify style on link selected
I have a nested li and they have specific classes. I am having issues with the nested classes. Despite the specific class, the styling is that of the class of the parent:
<ul>
<li class="navtitle-current">ONE
<ul>
<li class="navtitle-current">TWO</li>
<li class="navtitle">THREE</li>
</ul>
</li>
</ul>
.navtitle {
font-weight: none;
}
.navtitle a{
background-color:white;
color: gray;
}
.navtitle a:hover,
.navtitle:hover{
background-color:white;
color: black;
}
.navtitle-current {
font-weight: none;
}
.navtitle-current a{
background-color:white;
color: black;
}
.navtitle-current a:hover,
.navtitle-current:hover{
background-color:white;
color: black;
}
What I want to happen is that ONE needs to be in black, TWO in black and THREE in gray. However, all the links are black.
I was under the impression that if I explicitly have a class, I should not have any such issues. Does anyone have any thoughts?
All help is appreciated.
Note: I realize the CSS blocks are not in . I just put the code on here for the sake of showing what I have.
Because .navtitle-current is higher level than .navtitle, the links are inheriting the .navtitle-current a styles. If you want to style links inside that, you need to be more specific with your tags. Change .navtitle a to .navtitle-current .navtitle a and it should work.
Yet another way to go about this:
jsFiddle
.navtitle-current .navtitle a {
background-color:white;
color: gray;
}
It may be just a personal preference, but when possible I try to avoid chaining ul li ul li etc. I find it a bit more readable to use the class names.
The problem is selector specificity - your second to last declaration has the same exact same weight and origin as the class defining the gray-colored text - .navtitle a - and due to the nature of the cascade, the latter rule specified will win
From the 2.1 Spec, Specificity:
Finally, sort by order specified: if two declarations have the same weight, origin and specificity, the latter specified wins. Declarations in imported style sheets are considered to be before any declarations in the style sheet itself.
To overcome this, just increase the specificity of .navtitle a by including li before the class, e.g.
li.navtitle a {
background-color: gray;
color: gray;
}
Example
You could do it more clever:
<div class="titles">
<ul>
<li class="current">ONE
<ul>
<li class="current">TWO</li>
<li>THREE</li>
</ul>
</li>
</ul>
</div>
.titles ul li {...}
.titles ul li.current {...}
.titles ul li.current ul li {...}
.titles ul li.current ul li.current {...}
regards,
I've got a navigation menu. But the menu get's wild.
The submenu class (this is the dropdown if you hover firstmenu). 'firstmenu' are the main areas of the site, hence the first level of the list.
Problem: Submenu get's the Firstmenus values. Even the tiny arrow background: url(images/nav-arrow.png) no-repeat center bottom; in - BUT WHY?!
We already looked into this, split up the code, removed typo3, all JavaScript and ended up with this css code:
#firstmenu {
list-style: none;
margin: 0;
padding: 0;
}
#firstmenu .firstLevel {
float: left;
}
#firstmenu .firstLevel a {
display: block;
font-size: 1.166em;
font-weight: 600;
line-height: normal;
color: #333;
padding: 41px 20px 26px;
margin-bottom: 4px;
}
#firstmenu .firstLevel .current a,
#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
color: #fff;
background: url(images/nav-arrow.png) no-repeat center bottom;
}
#firstmenu .firstLevel a:hover,
#firstmenu .firstLevel a.selected {
background-color: #333;
}
/* Drop-Down Menus */
.submenu {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
}
.submenu > ul {
top: 4px !important;
}
.submenu .secoundLevel {
width: 200px;
background: #fca500;
}
.submenu .secoundLevel a {
display: block;
color: #fff;
padding: 8px 15px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.submenu .secoundLevel a:hover {
background-color: #333;
border-color: #1a1a1a;
}
.submenu .secoundLevel:first-child a {
border-top: none;
}
Anyone knows the fix?
EDIT, html:
<nav id="nav">
<ul id="firstmenu" class="clearfix">
<li class="firstLevel"><a href="index.php?id=99" >Startseite</a></li>
<li class="firstLevel current">Rootserver
<ul class="submenu">
<li class="secoundLevel"><a href="index.php?id=96" >Vergleich</a></li>
</ul>
</li>
<li class="firstLevel">Voiceserver
<ul class="submenu">
<li class="secoundLevel">Preisvergleich</li>
</ul>
</li>
</ul>
</nav>
I think the problem is a matter of understanding of CSS selectors. This selector:
#firstmenu .firstLevel a.selected {
color: #fff;
background: url(images/nav-arrow.png) no-repeat center bottom;
}
States the following: Match ALL <a> links that have a parent with class name firstLevel and it having a parent with ID firstmenu
That means this HTML bit matches:
<ul id="firstmenu" class="clearfix">
// snip
<li class="firstLevel current">Rootserver
<ul class="submenu">
<li class="secoundLevel">Vergleich</li>
</ul>
</li>
// snip
because the "secondLevel" menu has an anchor tag (<a>) that is a child (of any order, ie child, grandchild, great-grandchild, etc) of .firstLevel which is a child (of any order) of #firstmenu.
This is exactly how CSS is suppose to work but there ways to prevent what you're seeing.
The first option is to use the child selector (what I sometimes refer to as "direct descendent" selector) >
.firstLevel > a:hover{ /* code */ }
This selector specifically states: "all anchor tag that you hover which are directly descendent from .firstLevel, but no deeper.
Which means, it matches:
<li class="firstLevel">A</li>
but not the link with value "B" below
<li class="firstLevel">A
<ul>
<li><a href="#">B</b></li>
</ul>
</li>
because the second <a> tag is not directly descendant of .firstLevel, there's a <ul> and <li> between them.
The second option is to "overwrite" the previous style by having another rule with a higher CSS specificity.
#firstmenu .firstLevel .submenu a.selected {
background-image: none; /* remove the arrow from drop-down menus*/
}
There's reasons for doing one or the other.
Using the child selector is good when the styles are very specific to that element. You don't want ANY of the styles to carry over to further elements.
Use the "replacement" technique (for lack of a better term) when you're looking to modify only one specific style from another element. Ie. You want to keep the color, font, font-weight, but only want to remove the background image.
I hope that helps!
Here's some (bad) fiddles showing the base case:
http://jsfiddle.net/zTCbF/
with child selector
http://jsfiddle.net/zTCbF/1/
with the replacement technique
http://jsfiddle.net/zTCbF/2/
#firstmenu .firstLevel a {
This will target any anchor tag under .firstLevel including those under .secondLevel
So when you say...
#firstmenu .firstLevel a:hover,
You are applying your hover styles to ALL anchor tags that are descendants of .firstLevel
You want to say ...
#firstmenu .firstLevel > a {
Which will target only anchor tags that are a direct descendant of .firstLevel
The CSS active link style is being correctly applied in IE7, FF, and Safari but is not applied IE6.
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
Interestingly the background color (background-color:#9F1F63;) is being applied in IE6 but not the font color (color:#FFFFFF;)
Any ideas on why this is happening and how I can fix it appreciated.
The complete styling for the nav below:
.side_nav
{
text-align : left;
margin-left: -10px;
}
.side_nav ul
{
list-style-type: none;
list-style-position:inside;
margin-left:0px;
}
.side_nav li
{
margin-top: 10px;
display: list-item;
list-style-type:none;
}
.side_nav a, .side_nav a:visited
{
text-decoration: none;
color : #9F1F63;
font-weight : bold;
padding: 5px 10px 5px 10px;
}
.side_nav a:hover
{
color:#B26D7F;
}
.side_nav a.active
{
color:#FFFFFF;
background-color:#9F1F63;
}
EDIT: Thanks but the suggestions haven't helped. When I change to a:active the active effect does not work in any browser. I think this might be due to how I have applied the style in the HTML.
<div class="side_nav">
<a class="active" href="Page1.aspx">Page1</a><br />
Page2<br />
Page3<br />
</div>
In IE6, it matters which order you specify the anchor links. You should specify them in this order to achieve the intended result: first a:link, then a:visited, a:hover and a:active.
Your CSS has a period where there should be a colon, in .side_nav a.active (should be .side_nav a:active
With this fixed, it works for me in IE6.
I tried copying your code, and the format did work.
Your problem is you see the link as visited - you have both formatting of the visited and active (so you have the purple background and the purple text).
You should override the color for visited links with the active class:
.side_nav a.active, .side_nav a.active:visited
{
color: #FFFFFF;
background-color: #9F1F63;
}
Try adding a more specific selector to .side_nav a.active such as div .side_nav a.active where div is the parent element.
The color is probably being overwritten from the .side_nav a rule.
Also, you may have a typo - are trying to use the :active selector?
Try to use !important. Like this:
.side_nav a.active
{
color: #FFFFFF !important;
background-color: #9F1F63;
}