13 replies [Last post]
vermondans
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2005-04-14
Posts: 2
Points: 0

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

red58
Offline
Regular
Canada
Last seen: 12 years 39 weeks ago
Canada
Joined: 2005-03-21
Posts: 38
Points: 0

&quot;.zaza&quot; versus &quot;div.zaza&quot;

.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! Laughing out loud we'll see if the more knowledgeable here can put it better

Bill

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&quot;.zaza&quot; versus &quot;div.zaza&quot;

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}

Laughing out loud

vermondans
Offline
newbie
Last seen: 14 years 34 weeks ago
Joined: 2005-04-14
Posts: 2
Points: 0

&quot;.zaza&quot; versus &quot;div.zaza&quot;

thanks guy!

Great explanation.

This dissipates the confusion I had regarding this syntax issue.

patrick

Anonymous
Anonymous's picture
Guru

&quot;.zaza&quot; versus &quot;div.zaza&quot;

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.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

&quot;.zaza&quot; versus &quot;div.zaza&quot;

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 ?

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

&quot;.zaza&quot; versus &quot;div.zaza&quot;

Hugo wrote:
Triumph I'm not sure where you got the fourth set of values from ?
Inline declarations have a specificity of 1,0,0,0.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

&quot;.zaza&quot; versus &quot;div.zaza&quot;

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 11 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

&quot;.zaza&quot; versus &quot;div.zaza&quot;

The candidate spec. for CSS2.1 uses the same format as Triumph, with four levels of specificity.

http://www.w3.org/TR/CSS21/cascade.html#specificity

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

&quot;.zaza&quot; versus &quot;div.zaza&quot;

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.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

&quot;.zaza&quot; versus &quot;div.zaza&quot;

Woo hoo! What do I win? Wink

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 48 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

&quot;.zaza&quot; versus &quot;div.zaza&quot;

Nothing but a pat on the back for doing your homework Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Anonymous
Anonymous's picture
Guru

&quot;.zaza&quot; versus &quot;div.zaza&quot;

Hugo wrote:
Nothing but a pat on the back for doing your homework Smile
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!

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!
Laughing out loud

antibland
antibland's picture
Offline
Leader
Pittsburgh
Last seen: 10 years 48 weeks ago
Pittsburgh
Joined: 2005-01-17
Posts: 603
Points: 0

&quot;.zaza&quot; versus &quot;div.zaza&quot;

Triumph, I'm praying for you. [-o<

Antibland