A few CSS/HTML questions for the pros

1. Why is it that I can write CSS like this:

#sidebar nav {

background-color: #fff;

}

but if I want to have it hover a different color I have to do it separately like so:

#sidebar nav:hover {
background-color: #ccc;

}


why can't it simply be written all in one like this?


#sidebar nav {

background-color: #fff;
hover: #ccc;
}

you can put most other properties all in one, why does a hover color have to be done separate? Just wondering why so I better understand the language.

One more question:

I am playing around with css gradients, and I notice that if I make my nav buttons a solid color, the hover works just fine, but if I use the webkit/moz gradient properties on my buttons it gives them the gradient effect, but now there is no hover color that works until I revert buttons to solid color with no gradient.

 

It works that way because that's how selectors work in the DOM. If they did it as you suggest, browsers would have to interpret what you write and convert it to the same thing so it can work with the DOM.

Not sure about the second question. Need to see some markup.

 

OK,

I have this:

#topnavbar nav{
float:left;
width:120px;
height:27px;
margin-right:2px;
margin-bottom:-10px;
border:solid 1px black;
-moz-border-radius: 10px;s;
-webkit-border-radius: 10px;s;
border-radius: 10px;s;

background-color: #285691;
background-image: -moz-linear-gradient(top, #285691, #17385F); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #285691),color-stop(1, #17385F)); /* Saf4+, Chrome */
filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#285691', EndColorStr='#17385F'); /* IE6,IE7 */
-ms-filter: "progid: DXImageTransform.Microsoft.gradient(startColorStr='#285691', EndColorStr='#17385F')"; /* IE8 */
}

If I remove the gradient, the hover works. If I add it it doesn't.

#topnavbar nav:hover {
background-color:#666;

}

Also, in my index html I am using HTML5 <nav> tags.

 

Firefox needs you to add 'display:block' to the new html5 elements like nav, section, article, etc. That will probably fix it.

 

the first one is no hover effect color, the second one is. sometimes u need to make a diffrent color for the entire block when a user hovers it. that's why one is simple without hover, and other is with the hover.