CODEWITHSUNDEEP
htmlcss
Cornwell
Cornwell

Reputation: 3410

custom style for links inside <div> not working

I am stuck on something that seems very simple but I must be missing some minor detail. I have this div:

<div id="menu" class="menu_div">
<a href="/">HOME</a> | 
<a href="/pics.php">PICTURES</a>
</div>

And the following inside the style tags

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
    a:link {color:#000000; text-decoration:none;}      /* unvisited link */
    a:visited {color:#000000; text-decoration:none;}  /* visited link */
    a:hover {color:#FF0000; text-decoration:none;}  /* mouse over link */
    a:active {color:#FF0000; text-decoration:none;}  /* selected link */
}

Everything works except the links. I tried other combinations like .menu_div a:hover etc, nothing seems to work, any idea why?

Thanks

Upvotes: 0

Views: 2712

Answers (2)

Zoltan Toth
Zoltan Toth

Reputation: 47657

I don't see any SASS or LESS tags, so here is the solution - you can't have nested rules in CSS. You must define them separately:

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
}

.menu_div a:link {color:#000000; text-decoration:none;}      /* unvisited link */
.menu_div a:visited {color:#000000; text-decoration:none;}   /* visited link */
.menu_div a:hover {color:#FF0000; text-decoration:none;}     /* mouse over link */
.menu_div a:active {color:#FF0000; text-decoration:none;}    /* selected link */

Upvotes: 4

Quentin
Quentin

Reputation: 943097

You can't nest rulesets in CSS. You have to use descendant combinators.

.menu_div {
    background-color: #FFFFFF;
    border:1px solid black;
    width: 900px;
}

.menu_div a:link {color:#000000; text-decoration:none;}      /* unvisited link */
.menu_div a:visited {color:#000000; text-decoration:none;}  /* visited link */
.menu_div a:hover {color:#FF0000; text-decoration:none;}  /* mouse over link */
.menu_div a:active {color:#FF0000; text-decoration:none;}  /* selected link */

Upvotes: 2

Related Questions