i entered an infinited loop of confusion (selectors order)

[fortnox007]

Hi all, i do some css, but for some reason i missed a vital part of it and maybe someone might want to help me reset my brains a bit.

 

What i really can't see yet is what should be the order of the selectors in css.

for instance i see

 

a.fancy span{

bla: bla bla;

}

 

but somewhere else i see

 

.fancy a span{

bla: bla bla;

}

and than

 

.fancy, a, span{

bla:bla bla;

}

 

Is there maybe someone who can explain how to never do this wrong again. For some reason it's really confusing for me. So the question is really which selector goes first and when to use a comma when not

:'(

[fortnox007]

Okay let me rephrase it,

 

what is the real difference between

 

p.centre {} 

 

and

 

.center p {}

 

The rest I just found out.

[haku]

.fancy a span

This targets a span element inside an anchor tag that is inside any elements that have a class of 'fancy'

.fancy, a, span

This targets all elements with a class of 'fancy', all anchor tags, and all span elements.

p.centre

This targets all paragraph tags that have a class of 'centre'.

.center p

This targets all paragraph tags that are inside any elements that have a class of 'centre'

[fortnox007]

Oh that's awesome! thank you so much Haku! They should build you a statue

Cheers!