my css is not working? Anyone know why?

Question

This is the html:

<body ng-app="secret">
    <div id="mainBar">
        <div id="mainBarWrapper">
            <div id="siteLogo">
                <img src="images/mimiLogo.png" alt="mimi"/>
            </div>
            <div>
                <ul id="navBar">
                    <li><a ui-sref="login">Login</a></li>
                    <li>&nbsp;|&nbsp;</li>
                    <li><a ui-sref="signUp">Sign Up</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div ui-view></div>
</body>

This is all the css that seems relevant:

ul#navBar {
float: right;
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 10px;
list-style: none;
position: relative;
top:-10px;
z-index: 1000;
color: white;
font-size: 13px;
}

ul#navBar li {
margin-top: 0;
margin-bottom: 0;
margin-left: 1px;
margin-right: 0;
padding-top:20px;
padding-left: -5px;
text-align: center;
position: relative;     /*positions the submenu within the ul*/
float: left;
cursor: pointer;
z-index: 1000;
height: 29px;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}

ul#navBar a {
text-decoration: none;
}

ul#navBar a:hover {
color: #000;
}

ul#navBar a:visited {
color: #fff;
}

I am trying to get the a elements to have an hover effect when I hover over them. The ul#navBar a:hover { color: #000; } does not work. I am not sure why.

the link is already visited so your last rules `a:visited` sets it to white always. try moving hover to the last line — Ibu, Jul 16 '15 at 03:03
Please right-click on the element and choose "Inspect Element" to see which all styles are already applied. Then hover over the link to see which styles are applied. If that doesn't work, please upload the page somewhere so that we can check. — Sunish Menon, Jul 16 '15 at 03:07
@lbu moving the hover to the last line worked. so the visited selector overwrites hover? — simhuang, Jul 16 '15 at 03:10
Your code is working fine. See this [jsfiddle](https://jsfiddle.net/w06c1eq7/) of your code. I have just changed the default color to green. — Nitish Garg, Jul 16 '15 at 03:11
Use the [LVHA order -- `:link` `:visited` `:hover` `:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/%3Ahover#Summary) (Read the summary on that MDN link) — misterManSam, Jul 16 '15 at 03:27
Please give your question a descriptive name, such as "Hover not working on visited link". Also, please remove irrelevant parts of your CSS. — , Jul 16 '15 at 04:24
possible duplicate of [Why does .foo a:link, .foo a:visited {} selector override a:hover, a:active {} selector in CSS?](http://stackoverflow.com/questions/7371732/why-does-foo-alink-foo-avisited-selector-override-ahover-aactive-s) — , Jul 16 '15 at 04:25
@Ibu solution works. Although I don't really understand why. — simhuang, Jul 20 '15 at 18:10

Ibu · Accepted Answer · 2015-07-24T01:36:02.867

There are two things to pay attention to in CSS: Cascades and Specificity.

Cascading

Cascades as in the C ins CSS is the method the browser uses to process the rules. If I write 2 rules, the browser will process them from top to bottom merging the rules.

/** Rule 1 **/
.paragraph {
    font-size: 18px;
    color: white;
}
/** Rule 2 **/
.paragraph {
    margin-bottom: 20px;
    line-height: 26px;
}

When the browser reads them, it will combine them into this:

/** Generated Rule **/
final selector {
    font-size:18px;
    color: white;
    margin-bottom:20px;
    line-height:26px;
}

If in the second rule I was to add an extra attribute to set the color to red, this is what the generated rule will look like:

/** Generated Rule **/
final selector {
    font-size:18px;
    /* color: white; deleted in favor to the second rule*/
    margin-bottom:20px;
    line-height:26px;
    color:red; /* This rule prevails due to cascades */
}

This is the problem you are having in your code, by having the :visited selector in the bottom, you are canceling the hover rule.

(in case you need to know how specificity work, i'll add it here)

Specificity

Each type of selector carries a weight. For example, the #id is important than the .class select, the class is more important then the html tag, and so on.

The weight of the selector bypasses the cascading effect.

/* Rule 1 */
#paragraph {
    color: red;
}

/* Rule 2 */
.paragraph {
    color: green
}

/* Generated Rule */
selector {
    color:red;
    /* color:green; Deleted in favor of the #id selector */
}

In this case, the order of definition did not matter. The ID prevailed.

By keeping those two rules in mind, you will have an easier time dealing with CSS.

See full post about these rules.

my css is not working? Anyone know why?

1 Answers1

Cascading

Specificity