Why won't my font colour change? CSS3 - html

Question

im trying to change the colour of #commentslink to white. All my other font styling (font- family, size) is working, just the colour won't change
My HTML is this;
<div id="commentslink">
<div class="circle">
<p>10</p>
</div>
</div>
and my CSS is this
a:link, a:visited {
color: #0eb0d3;
text-decoration: none;
}
a:hover {
color: #0eb0d3;
opacity: 0.4;
text-decoration: none;
}
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
.circle {
float: right;
background-color: #f89b2d;
width: 32px;
height: 32px;
border-radius: 16px;
position: relative;
margin-top: -10px;
margin-right: 20px;
}

Answer 1

First of all its only color and not font-color: #ffffff; and secondly you should use
#commentslink a { /* Specific selector */
color: #fff;
}
Demo
Let me tell you, the above selector will select all a tags inside the element having #commentslink as an id so if you want to target a nested inside p you can use a more specific selector like
#commentslink .circle p a {
/* Selects all a element nested inside p tag further nested inside an element
having class .circle which is further nested inside an element having
#commentslink as an id
*/
color: #fff;
}
Just don't make your selectors overspecific if you don't really require, else you will end up making more and more nested rules thus bloating your CSS, so go as much basic as you can.
Last but not the least, this has nothing to do with CSS3
Just a good read here.. related to this answer...

Answer 2

Try this with !important
#commentslink {
float: right;
color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
and use color: rather than font-color

Answer 3

Elaborating on Mr. Alien's answer, it's best to use the selector #commentslink a. CSS rules are applied in order of specificity, and the style for the a element is more specific than the styling for its parent element (#commentslink). The selector #commentslink a is more specific than either of the others, and will therefore take precedence.
Here's a good article on specificity.
And as others have stated, the property is color not font-color.
#Sobin, !important should be used sparingly, as it will clobber other rules applied to elements within the #comments div. Better to take advantage of specificity.

Answer 4

The "10" is going to be #0eb0d3 because of the CSS styling applied to a tags.
Change
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
To
#commentslink {
float: right;
font-color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
And it will override the other styling

Answer 5

Replace font-color with color.
#commentslink {
float: right;
color: #ffffff; // this is enough not font-color
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
Also
a:link, a:visited {
color: #0eb0d3; // Also this a css override
text-decoration: none;
}
Update: I just realized that above won't work. I thought parent's css will override the child. But this is wrong here, since a tags have default color rendered by browsers.
#commentslink a {
color: #ffffff;
}
Thanks #Mr. Alien for his fiddle and the SO link.