Thu, 2005-04-14 17:34
What is the difference between these 2 rules?
.zaza {
................
}
and
div.zaza {
................
}
When using them in context:
<div class="zaza">blablablabal</div>
It seems like I can use either one or the other.
So why the 2 different syntaxes?
Thanks,
patrick
Thu, 2005-04-14 18:10
#1
".zaza" versus "div.zaza"
.zaza is a class selector
div.zaza is a context selector
I think usually the attributes of the 2 zaza's would be different, as the 1st would apply to any element it was assigned to, the 2nd would only apply when used in div's - in your example, if the attributes were identical then there wouldn't be any difference in the outcome as far as my limited css knowledge can tell
don't quote me on that! 
we'll see if the more knowledgeable here can put it better
Bill
Thu, 2005-04-14 18:48
#2
".zaza" versus "div.zaza"
red58 pretty much has it as I understand it.
the two syntaxes aren't quite identical.
.someclass {} will attempt to apply the styles to any element with a class attribute of "someclass".
div.someclass {} will only attempt to apply the styles to <div> elements with a class attribute of "someclass". The browser will ignore any other elements.
e.g.
body {color:black; background-color: white}
.someclass {color:white;}
div.someclass {background-color: blue;}
<body>
<h2 class="someclass">page header</h2>
<div class="someclass">content box</div>
</body>
the id selector, "#", is a little different, in that there should only be one element in the page with that id. It is possible that over the many pages that use a particular stylesheet different elements could have a given id though.
Common sense will tell you that although you can use the same class with different elements and incongruous styles its not the smart thing to do.
e.g.
div.confusingclass {display:inline}
span.confusingclass {display:block}
h1.confusingclass {font-size:50%; color:white}
h5.confusingclass {font-size:5em; color:goldenrod}
Thu, 2005-04-14 19:06
#3
".zaza" versus "div.zaza"
thanks guy!
Great explanation.
This dissipates the confusion I had regarding this syntax issue.
patrick
Thu, 2005-04-14 22:20
#4
".zaza" versus "div.zaza"
This is called specificity in css.
ID attributes add 0,1,0,0
class attributes add 0,0,1,0
elements add 0,0,0,1
therfore if you have:
div.zaza {color:blue;}
.zaza {color:red;}
<div class="zaza">this text should be blue</div>The text is blue. Sure red is defined after but .zaza gives a specificity of 0,0,1,0 while div.zaza gives a specificity of 0,0,1,1 so it trumps .zaza alone.
In specificity 0,1,0,0 carries more weight than 0,0,15,0.
Fri, 2005-04-15 01:00
#5
".zaza" versus "div.zaza"
In a sense yes it is 'Specificity' but it's clearer if it's explained as the fact that one rule requires that the class selector belongs to a certain named element and the other will apply to any that it's placed on.
You're right that you can work out the specificity to arrive at the conclusion that one overrides the other in precedence.
The calculation is arrived at by concatenating the values of A,B,C
A= the number of Id elements. B= the number of attributes,pseudo classes. c= the number of actual element selectors. You add up the number of each of these items and string the values together
i.e #container p .classrule {} would give a total value of 111 and p .clasrule would give 011 a lower value, the higher value is more specific so trumps the less specific p .classrule.
It's also clear to see that to some extent you don't have to work out the numbers as the word 'specificity carries the clue to the fact that the more you state in detail the selectors that your rules apply to the better chance there is of the ruleset being honoured.
Triumph I'm not sure where you got the fourth set of values from ?
Fri, 2005-04-15 01:23
#6
".zaza" versus "div.zaza"
Hugo wrote:
Inline declarations have a specificity of 1,0,0,0. Triumph I'm not sure where you got the fourth set of values from ?
Fri, 2005-04-15 02:42
#7
".zaza" versus "div.zaza"
They have a specificity of 100 'implied' as they can not be calculated due to the fact that do not carry selectors and are deemed to override everything anyway so in reality never figure in the calculation or am I missing something.
Hugo.
Fri, 2005-04-15 02:58
#8
".zaza" versus "div.zaza"
The candidate spec. for CSS2.1 uses the same format as Triumph, with four levels of specificity.
Fri, 2005-04-15 03:10
#9
".zaza" versus "div.zaza"
Ah I see , well apologies Truimph I was clearly working from old information :roll:
Another case of the W3C not able to think things through first time round . makes sense that the inline selector comes first in the order being that it is the most specific, that's always been the case though so you would think they would have noted it that way to begin with.
Hugo.
Fri, 2005-04-15 21:46
#10
".zaza" versus "div.zaza"
Woo hoo! What do I win? 
Fri, 2005-04-15 23:10
#11
".zaza" versus "div.zaza"
Nothing but a pat on the back for doing your homework 
Sat, 2005-04-16 01:17
#12
".zaza" versus "div.zaza"
Hugo wrote:
Thank you! Oh! Thank you! I can hardly breathe! I feel so surgically enhanced! And this statue - it's so full of chocolate! Oh, thank you again! I just want everyone to secretly suspect that even in my wildest hallucinations, I never would have fantasized that this could ever validate my mediocrity. And to the other super-amazing nominees, I want each of you to know how totally wonderful your crushing defeat makes me feel right now!
Nothing but a pat on the back for doing your homework
You know when they first told me I was blonde enough, I just had to take a Xanax and obsess about how freakish my experiences have been. I guess it all just makes me feel kinda wrinkly.
You know, there are so many obsequious exploitative agents to thank! First off though, I want to pay off the senile old bats of the Academy, who looked deep within their Magic 8-Balls before giving me this fantastic award! Also, I want to thank Dad, who taught me to take life by the fifth of bourbon. And finally, to all the personal assistants I fired - I couldn't have done it without you!
Thank you csscreator.com, and good night!
Sat, 2005-04-16 02:20
#13
".zaza" versus "div.zaza"
Triumph, I'm praying for you. [-o<
Antibland