Here are the options. In each of these you can replace "p" either with some other single element name like "li", or the * wild card. Note that the element name comes
before the [class etcetera] part.
p[class] means "p elements that have a 'class' attribute of any kind"
p[class=classname] means paragraphs with one, specific named class (you can use single quotes, double quotes or none at all). I can't figure out when you would use this instead of "p.classname" but I'm probably overlooking something.
p[class|=first] means the paragraph's class has either the exact name "first", or "first-blahblah" with a hyphen. This syntax is primarily intended for languages, where you might want "en" to be handled the same as "en-ca" and "en-us" and "en-za", but it works for other attributes such as class as well. The character before the = is a | (pipe).
Oh, and p[class~=firstclass secondclass] with ~ tilde before the = sign is supposed to mean two or more specific, named classes.
I experimented like mad with all possible permutations of quotes and spaces, but could not get this form to work with more than one name. The !important element should be taken as a last resort; if you can find a way to enforce the rule on its own merits, do so.
It sounds as if what you're trying to say is
.containername > *:first-child {margin-left: 0;}
and then you're running into a conflict because some of those first children already have a non-zero margin defined? In general, descendant selectors override class selectors when there's a conflict.
Except, presumably, in some version of MSIE. It should be enough to say
.containername > *:first-child, .containername > *[class]:first-child {margin-left: 0;}
meaning "do this
whether or not the child belongs to a named class". Put this rule
after any rule that gives a different margin for your named classes.
Now personally I don't care for the all-encompassing *. How many different kinds of elements can actually be the first child of your container? In practice it will probably be something specific, like p or ul.
Anyway, try the form
.myelements *[class|="col"] > :first-child
and see if that works for all classes named either "col" alone or "col-something".
At this point, a light bulb went off as it occurred to me that this is a practical reason for using - hyphens in class names. Trala!
