Syntax

[krycek]

This is something I feel I should know, but I don't.

When using CSS styles, we can define them like this:

.customClass {}

and if the same style should be applied to more than one class, we separate them with commas, yeah?

.customClass1, .customClass2 {}

However, what about parents and children? CSS2 supports this syntax:

.parentClass>.childClass {}

However as we know, not all browsers support that yet. So, I have always thought that dot or space syntax is the idea (this is where the problem comes in).

I started off thinking that something like this:

.parentClass.childClass {}

was correct notation. However, that caused me some problems in either IE or Mozilla. In the end I changed it by adding a space in between, like this:

.parentClass .childClass {}

Now it strikes me that custom classes start with dots, yeah? So surely standard HTML tags should work without the space, e.g.

p.a {}

But I believe I found problems with that, too.

Applying the same logic to the custom classes:

.parentClass..childClass {}

didn't get me anywhere, and seems odd, too. But I had to try.

What I want to know, is, what is the proper method of defining children? Without using the ">" CSS2 syntax? Because I have seen a few places that use p.a syntax however that doesn't always work for me especially when using custom classes.

Oh and before anyone says about it, yes I looked at the W3C (my first point of call as always) and it didn't help much. I want to know what will work, and work now, in IE6 and Mozilla, but also as far back as possible (does IE6 support ">"? I don't think so...?)

Cheers anyone!

::] krycek [::

[jkd]

There are two ways of selecting children:

myselector anotherselector {
}

This is the most inefficient way, as it selects all descendants (that match anotherselector) of whatever myselector matches.

However, IE5+ and Gecko support it.

myselector > anotherselector {
}

selects immediate descendants, which is typically what you want, and is more efficient.

Opera 6+, Mozilla, Konqueror all support it.

You can also selector some children via pseudo-classes:

myselector:first-child {}
and
myselector:last-child {}

I don't believe IE supports those however.

[krycek]

...so...

are you saying there is supposed to be a space, or not? That's basically what my post was on about. Although, from your example, I would assume that my current method of coding with a space is correct.

::] krycek [::

[krycek]

um hello? Space or no space?

::] krycek [::

[jkd]

You need the space to tell it to select descendants.

[krycek]

cool that's what I worked out

so, why do some places script their styles without using a space? e.g. p.b - that seems a bit silly don't you think!


Merry Christmas Everyone!

::] krycek [::

[jkd]

selector.classname

specifies rules for only for elements with classname that match selector.

[krycek]

eh?

Just when I thought I had it worked out!

Can you just explain the difference between using a space and not using a space...? They both seem the same to me? When would I use a space and when would I not?


Merry Christmas Everyone!

::] krycek [::