CSS hierachy problem 1

[1DMF]

Hello,

I have some CSS defined,

#section2 label{
blah blah;
}

I later within the div (#section2) I put another div and give it a class="other_mortgages".

I want to apply different CSS to the label within this div, so how do i code it?

i've done,

.other_mortgages label {
blah blah;
}

but it still applies the #section2 label {} CSS , how do I overide it without putting class="other_mortgages" to each label and then using

label.other_mortgages {
blah blah;
}

hope that makes sense.

1DMF.

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[ChrisHunt]

The specificity (try saying that when you're drunk) of a rule including an id reference will always outrank one with just a class.

The solution is to put the id in the second rule too:

#section2 .other_mortgages label {
blah blah;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[1DMF]

thanks Chris, I knew that ID > CLASS and ELEMENT > ID or CLASS rule , but it was the syntax I had problems with.

I had tried what at first glance appeared to be your solution

#section2.other_mortgages label

but as you can see the dot joined the class and id, which now i realise only works if the physical #section2 id had class="other_mortgages".

You helped no end understanding when to join elements when defining CSS or when to have a space.

Again many thanks

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.