Google Chrome CSS class pseudo-class group not working

StackOverflow https://stackoverflow.com/questions/19353103

Question

I'm not sure if this is really a bug with Google Chrome, but here is what happens:

When I nest the pseudo-class a:link, a:visited in a class, all <a> elements in the page will get the latest color set in the nesting. It only happens with the color property. In other browser it does not happen, I'm using Google Chrome 30.0.1599.69 m

CSS: 

.cat ul{
    list-style-type:none;
    margin-top:10px;
    padding-left:10px;
}

.cat a:link, a:visited {
    margin-top: 3px;
    font:15px arial,sans-serif;
    display:block;
    color:#000000;
    text-align:left;
    text-decoration:none;
}

.cat a:hover,a:active {
    background-color: #eeeeee;
}



.menu ul {
    list-style-type:none;
    margin:0;
    padding:0;
    overflow:hidden;
}

.menu li {
    float:left;
}

.menu a:link,a:visited {
height:35px;
padding-top:8px;
    display:block;
    width:120px;
    font-weight:bold;
    color:#FFFFFF;
    background-color:#2d0000;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
}

.menu a:hover,a:active {
    background-color:#7A991A;
}

HTML:

<html>
<head>
<title>TITLE</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
<body>
<div id="wrapper">
    <div id="site">

            <div id="header">
                <div id="logo"><img src="./img/logo.png" /></div>
                <div id="cart"></div>
            </div>
            <div id="subheader">
                <div id="menu" class="menu">
                    <ul>
                        <li><a href="#home">Home</a></li>
                        <li><a href="#news">News</a></li>
                    </ul>
                </div>
                <div id="searchbar">
                    <form>
                        <input type="text" name="search" /> <input type="submit" name="ok" value="Search" />
                    </form>
                </div>
            </div>
        <div id="body">
            <div id="category" class="cat">
                <ul>
                    <li><a href="#home">Home</a></li>
                    <li><a href="#news">News</a></li>
                    <li><a href="#contact">Contact</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            </div>
            <div id="main">
                <a>Test</a>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</div>
</body>
</html>
Was it helpful?

Solution

Here you set .cat a:link and all a:visited to black color - all a in .cat and all a in hole css a:visited are set to black..

.cat a:link, a:visited {
    .....
}

Here you set .menu a:link and a:visited to white. So all a:visited will be white... Not only in .menu... 

.menu a:link,a:visited {
.....
}

I think you have mistake in .cat a:link, a:visited - it should be .cat a:link, .cat a:visited. Same mistake in .menu a:link, a:visited - this should be .menu a:link, .menu a:visited

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top