selectors and their targets...

[Somhairle]

Hi guys,

I've seen some css scripts where different tags were used (using check source) but I've been checking so many that I can't remember where it was that I saw it. DOH! (...in a loud Homer voice) :P

something along the lines of:

#header-nav>img{ /* is this the right format? */
whatever
}

or is this better..............

#header-nav img{
whatever
}

AND....................

.whatever, .whatever-more{
whatever
}

these are classes targeting other classes in the same *.css file? or what?

AND......................

/* \*/
* html .flip, * html .flop{
whatever
}
/* */

This one the class "flip" and "flop" are being targeted in an external html file?

Any advice on the above specificaly would be great!

and finally, are there any limitations cross-browser wise with the actual tag used? ie: #flip-123 or #21_flip and so on

thanks in advance!

[Stormfx]

Well, I guess the best way is to say:

#parent > #child {}
(Only affects the first #child element directly under the #parent element.)

#parent #descendant {}
(Affects any #descendant element of the #parent element, no matter how nested it is.)

#item1, #item2, #item3 {}
(List of items to be affected, seperated by a comma.)

* {}
(Means any element)

/* ... */
(Comments.)

Hope that explains it. Most people use the #parent #descendant {} selector because IE is a PoS and can't read #parent>#child selectors. As far as naming conventions, it's up to you. Avoid starting a class or id with a number. I advice naming them something explanatory. For example #column1, #left-nav, etc.