Hi all I've seen the use of "*", ">" and "," in CSS sample pages and templates on help sites. What do they mean and how are they used?
Are you familiar with wildcards or regular expressions?? They are good to be familiar with. CSS borrows a bit from them, but in CSS these symbols are called "selectors" (anything that determines which element gets the styles). * means "any and all". ul * { styles; } would mean any and all children of a ul * { margin: 0; } would mean all elements, n0 margins. * html #element { styles for IE6 alone; } IE6 and below believe in a fictitious parent of the <html> tag, which we can use to give styles to IE6 and below only. This is a stable hack (called the Tan hack but I've seen other names as people have found other things you can do with this) often used to fix IE6 bugs. > is a direct child selector. <div id="foo"> <p>foo man child</p> <p>another foo man child</p> <div> <p>grandchild foo again <a href="foo.com">linkje</a>.</p> </div> </div> Code (markup): The first two p's are direct children of the first div. If you said div p { styles; } you'd hit all the p's including the p with the anchor in it. #foo>p { styles; } here we use the name of the div, #foo, and say we only want to style the p's who are direct children of that #foo div. The other p is a grandchild. The comma separates commands is all. a:link { color: #f00; } a:visited { color: #f00; } could be written a:link, a:visited { color: #f00; } Don't fall into the trap of thinking the stuff before the comma has anything to do with the stuff after the comma! <ul id="menu"> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> <li><a href="#">link</a></li> </ul> Code (markup): #menu a:link, a:visited { color: #f00; } The mistake here is the a:visited is not restricted to a's in the #menu. It means ALL a's! You need to write it like so: #menu a:link, #menu a:visited { color: #f00; }
WOW! What a clear and detailed explanation. Thank you so much. I have been reluctant to ask this question in case it was so simple everyone knew the answer but me. I'll certainly be using these from now on. Thanks again
More importantly is to learn to use The Googles. Try it: css selectors > , * So you may not have known the name "selectors"... so it'll make your question on forums look better by saying something like "I tried finding out what these symbols in CSS mean > , * but google doesn't come up with anything. I'm using (list the search terms you tried here) terms in Google. Is there a better way to find out about these things? What are they called?" For easy questions, someone will just answer it. Ultimately there are things you'll only find on the googles, but then only after you learn the names for things (like names of browser bugs... some of them have particular names, esp in IE6). Or you'll get smarmy geeks who do this: Let Me Google That For You (it does actually give a decent result if you scroll down a bit, but it wouldn't have worked for the comma without you knowing the word "selectors") : )
This youtube video covers universal and descendant selectors (cut and paste address into browser): http://www.youtube.com/watch?v=7NSh16Ru4PM&feature=channel This is episode 4. Then continue with episodes 5-8. Each tutorial is about 4-5 minutes long.