Problem with CSS Specifity?

HTML & CSS
1

Hi,

I have done several websites so far and I’ve stucked on this very basic example :(.
I really don’t know why the “Second” word is not displayed in #666 color. I’ve tried to extend #second definition to .first#second#a and it didn’t work as well.

This is a simplified code:
HTML

	<div class="first">
		<a href="#">First</a><br />
		<a href="#" id="second">Second</a>
	</div>

CSS

.first a{color:#1155CC;}
#second a {color:#666666;}

The same is happened if I changed #second ID to class.

2

Either change the #second to a#second or just #second and it should work. The way you’ve got it, it would only match if there was an a element inside a container with the id of second.

3

Say .first a#second {…}

4

Thanks a lot,
I really aprreciate, is there any document speaking about it? I mean difference between a#id and id# a. I’ve read some books and actually didn’t see any examples.

…why this doesn;t work

a.first {color:#fff;}
a#second {color:#666666;}

5

There are tons of “CSS specificity” articles , just google.

difference between a#id and id# a

That case is not so much a specificity issue , as they both have the same “weight” as far as that goes. This is probably why you never saw an example in specificity articles.

a#id means: an A tag that has the ID =“id”
example :
<ul>
<li><a href=“mydoc1.html” id=“other”>other</a></li>
<li><a href=“mydoc2.html” id=“notit”>other2</a></li>
<li><a href=“mydoc.html” id=“id”>My Doc</a></li>
<ul>
on the other hand
id# a means: ANY A tag that’s WITHIN an element with the ID=“ID”

<ul id=“id”>
<li><a href=“mydoc1.html” >other</a></li>
<li><a href=“mydoc2.html” >other2</a></li>
<li><a href=“mydoc.html” >My Doc</a></li>
<ul>

So this :
a.first {color:#fff;}
a#second {color:#666666;}

should be:

 .first a {color:#fff;}
a#second {color:#666666;}

As long as we are at it. IDs ARE UNIQUE ( not to be used elsewhere in the mark up). So a#second is a bit redundant, if you are doing that using IDs just write : #second {color:#666666;}

Hope that helps clear things up

6

Thanks a lot