Make your own free website on Tripod.com

There is a lot to be said about CSS. I am not here to give a complete tutorial on CSS, that could be obtained by searching the net. What I am doing here is give some points that a reader might not comprehend while reading through these other resources.

Note: It is essential that one is familiar with all basic CSS concepts and some advanced ones before reading on.

Follows are the main points I am gonna clarify and also is included a chat session on IRC between me and an experienced guy in css that made some things clearer and by using my mind I figured the rest out.

The Chat:
<Infinite_Recursion> hi
<Infinite_Recursion> anyone into css?
<Absolute0> i got version 6 and i cant find that feature
<Infinite_Recursion> what feature?
<Absolute0> save to image?
<Infinite_Recursion> i don't understand
<Absolute0> how do i do it with nero?
<Infinite_Recursion> Recorder-->Chose Recorder
<Absolute0> isnt there like a good stable free program that does of what i want to do?
<cromlech> nero
<Infinite_Recursion> i told u
<cromlech> haha
<Absolute0> like nero is best for burning, daemon tools for loading images
<Absolute0> i can do it on nere
<Absolute0> nero
<cromlech> anyway, that's far beyond the topic of this channel, Infinite_Recursion 
<Infinite_Recursion> what is?
<Infinite_Recursion> I am talkin css
<Infinite_Recursion> is that off topic?
 no
<cromlech> sorry
<Infinite_Recursion> last time I checked 2 were related
<cromlech> hehe
<cromlech> wrong nick
<Infinite_Recursion> :)
 he was referring to Absolute0
<cromlech> Absolute0: anyway, that's far beyond the topic of this channel
 what was your css prob
<Infinite_Recursion> yeah
<Infinite_Recursion> i have this simple css
<Infinite_Recursion> and i wanna know the specificity 
<Infinite_Recursion> and which style will eventually prevail
<Infinite_Recursion> but i read things that are different from what is happenning
<Infinite_Recursion> :(
<cromlech> what are your styles?
<Infinite_Recursion> paste them here?
<cromlech> eh, how much is it?
<Infinite_Recursion> a couple of line
<Infinite_Recursion> wait
<cromlech> url?
<Infinite_Recursion> .DataEntry input{    width:100%;} Input.fancyButton{       width:10px;}
<Absolute0> now i remember its CLONECD!!!
<Infinite_Recursion> they both apply to a button inside a table
<Infinite_Recursion> table has class="DataEntry"
<Infinite_Recursion> and button has class = "fancyButton"
<cromlech> ok
<Infinite_Recursion> so I have a descendant selector and a class selector
<Infinite_Recursion> which prevails?
<cromlech> I think they will have the same specificity, so the one appearing last in your stylesheet will prevail
<Infinite_Recursion> that is what is happenning but i cannot explain it
<Infinite_Recursion> how do u get the specificity?
<Infinite_Recursion> I read that the specificity of descndant selectors are less specific than class selectors
<cromlech> Infinite_Recursion: kinda
<Infinite_Recursion> what do u mean kinda
<cromlech> element selectors have less specificity than classes
<cromlech> but both your selectors include one element and one class
<cromlech> this gives you specificity on both selectors: 0,0,1,1
<Infinite_Recursion> yeah
<Infinite_Recursion> 11 for both
<cromlech> 0 (not inline style), 0 (no id's), 1 (one class), 1 (one element)
<Infinite_Recursion> i read that
<cromlech> ok
<Infinite_Recursion> but u think if i add another element will it make a diff?
<cromlech> it sure will
<cromlech> form input.fancyButton will always prevail over .DataEntry input for instance
<cromlech> since form input.fancyButton has 0,0,1,2 and .DataEntry input has 0,0,1,1
<Infinite_Recursion> ok check this
<Infinite_Recursion> .DataEntry input, select{    width:100%;} Input.fancyButton{       width:10px;} 
<Ro--> hELLO
<Infinite_Recursion> who wins?
<Ro--> er...
<cromlech> Ro--: hi!
<cromlech> Infinite_Recursion: for the input.fancyButton? Whichever comes last in your stylesheet
<Infinite_Recursion> why
<Infinite_Recursion> u just said that if i add an element then specificity increases
<Infinite_Recursion> i added select
<Infinite_Recursion> so dataentry wins
<Infinite_Recursion> right?
<cromlech> because they both have the same specificity. adding ", select" is just adding another selector, not adding to the current selectors 
  specificity
<Infinite_Recursion> how then i can add to the same selector
<cromlech> Infinite_Recursion: you have listed a set of rools for two distinct selectors in your example
<Infinite_Recursion> ?
<Ro--> {width:10px !important} takes all.
<cromlech> well, yeah, that too
<cromlech> Infinite_Recursion: .DataEntry form input will solve your problem as well
<Infinite_Recursion> u mean no comma
<Infinite_Recursion> ?
<cromlech> this way you're adding an element to your selector (thus increasing it's specificity). The way you did it was just to add another 
  selector
<cromlech> no comma, yes
<Infinite_Recursion> ok how abt this
<Infinite_Recursion> .DataEntry input select{    width:100%;} Input.fancyButton{       width:10px;} 
<cromlech> why would you stick a select box inside an input?
<Infinite_Recursion> does what i wrote mean inside?
<Infinite_Recursion> oooooooooooooooooh
<Infinite_Recursion> ok
<Infinite_Recursion> it is a bit clearer now
<cromlech> form input  mens (find all  that resides inside an input that again resides inside a form
<Infinite_Recursion> oook
<Infinite_Recursion> that explains alot
<Infinite_Recursion> just one more thing
<cromlech> form input,  {color: red;} breakes up to this: form input { color: red; }  {color: red} (ie TWO 
  distinct selectors)
<Infinite_Recursion> we agreed before that contextual selectors are less specific than any class selector
<Infinite_Recursion> right?
<cromlech> right
<Infinite_Recursion> so where does that rule come into play?
<cromlech> how do you mean?
<Infinite_Recursion> i mean we used the 1 0 rule to calc spec
<Infinite_Recursion> not this rule
<Infinite_Recursion> where does that rule play a role
<Infinite_Recursion> ?
<cromlech> I don't understand...
<Ro--> what exactly was the question?
<Infinite_Recursion> i mean what difference does it make if contextual < class if we use the  1 0 rule?
<cromlech> ah
<cromlech> it makes the selectors specificity 0,0,1,2 - that will prevail over 0,0,1,1
<cromlech> they originally had the same specificity, so anything you add to one of them will make that one the prevailing one
<cromlech> Infinite_Recursion: was that a good enough answer to your question?
<cromlech> I need a cigarette, be back soon
<Infinite_Recursion> where did the 2 come from
<Infinite_Recursion> i am sorry i was away
<Infinite_Recursion> i mean .DataEntry input is 1 1
<Infinite_Recursion> not 1 2
<Infinite_Recursion> 0, 0, 1, 2 where did it come from?
<Infinite_Recursion> and also if we say input.fancyButton that will make 0 0 2 1 which seems to me even more specific than 0 0 1 2
<Infinite_Recursion> so except for the very specific case of 0 0 1 1  class is > context is this a correct conclusion?

References:

Till next time...