css2 -- pattern-matching..

I'm trying to learn CSS2, find some aspects of it quite confusing..

here, http://www.w3.org/TR/REC-CSS2/selector.html#q1 I see this:

E F : Matches any F element that is a descendant of an E element.
Descendant selectors
E > F : Matches any F element that is a child of an element
E. Child selectors

please, what is difference between a descendant and a child element..

thank you.

maya wrote:

I'm trying to learn CSS2, find some aspects of it quite confusing..

here, http://www.w3.org/TR/REC-CSS2/selector.html#q1 I see this:

E F : Matches any F element that is a descendant of an E element.
Descendant selectors
E > F : Matches any F element that is a child of an element
E. Child selectors

please, what is difference between a descendant and a child element..

thank you.

Your child is your child. Your descendant can be your child, your
grandchild, your great-grandchild, etc.

Harlan Messinger wrote:

maya wrote:

I'm trying to learn CSS2, find some aspects of it quite confusing..

here, http://www.w3.org/TR/REC-CSS2/selector.html#q1 I see this:

E F : Matches any F element that is a descendant of an E element.
Descendant selectors
E > F : Matches any F element that is a child of an element
E. Child selectors

please, what is difference between a descendant and a child element..

thank you.


Your child is your child. Your descendant can be your child, your
grandchild, your great-grandchild, etc.

ok, thank you very much.. I had thought maybe they were different
relationships..

maya wrote:

Harlan Messinger wrote:

maya wrote:

I'm trying to learn CSS2, find some aspects of it quite confusing..

here, http://www.w3.org/TR/REC-CSS2/selector.html#q1 I see this:

E F : Matches any F element that is a descendant of an E element.
Descendant selectors
E > F : Matches any F element that is a child of an element
E. Child selectors

please, what is difference between a descendant and a child element..

thank you.

Your child is your child. Your descendant can be your child, your
grandchild, your great-grandchild, etc.

ok, thank you very much.. I had thought maybe they were different
relationships..

Umm - you're not paying attention. They ARE different relationships.

A child is a descendant, yes. But although a descendant can be a child,
a descendant can also be a grandchild, etc.

To put it back in CSS terms - (using your case above) assume the style:

div.E div.F { background-color: red; }

If you have:

<div class="E"> (filler)
<div class="whatever"> (filler)
<div class="F">Stuff here</div>
</div>
</div>

<div class="E"> (filler)
<div class="F">Stuff here</div>
</div>

both class "F" divs would have a red background.

BUT if you defined the style as:
div.E > div.F { background-color: red; }

ONLY the second one would have a red background - since the first one is
a descendant, but NOT a CHILD of "E".

--
"The most convoluted explanation that fits all the available and made-up
facts is the most likely to be believed by conspiracy theorists"

Tony <tony23 (AT) dslextreme (DOT) WHATISTHIS.com> scripsit:

A child is a descendant, yes. But although a descendant can be a
child, a descendant can also be a grandchild, etc.

These metaphoric names - which derive from the common information technology
jargon - are rather unfortunate. A father or a mother does not contain their
children and other descendants.

We cannot change these misleading terms, but it helps to translate them
(mentally and in teaching) to more suitable expressions. A "child" is a
(direct) subelement, whereas a "descendant" is an indirect subelement, i.e.
a subelement or a subelement of a subelement etc. There is nothing
comparable to begetting a child or giving birth to a child or raising a
child. ("Inheritance" - probably the most often and most seriously
misunderstood basic concept of CSS - means that a subelement copies a
property value from its enclosing element if does not get a value for the
property from any style sheet directly. So the word "inherit" is hardly a
good metaphor either.)

To put it back in CSS terms - (using your case above) assume the
style:
div.E div.F { background-color: red; }

That's a bad example; setting background-color without setting color (or
background-image) is bad practice. It's common practice, and therefore it's
particularly bad style in an example. It's not "just an example". People
learn by example. If your text contradicts with your examples, people
understand, believe, and remember the examples and ignore the texts. With a
bit exaggeration (well, maybe a little more than a bit), one can say that in
explaining matters like CSS, or markup, or programming, examples are the
real thing, and the text is there just to fill the pages and perhaps to be
consulted if an example is not quite crystal clear.

both class "F" divs would have a red background.

Assuming that no other style sheets are involved, that is.

BUT if you defined the style as:
div.E > div.F { background-color: red; }

ONLY the second one would have a red background - since the first one
is a descendant, but NOT a CHILD of "E".

Wouldn't it be simpler to say just that
..E .F matches any class "F" element that is directly or indirectly a
subelement of a class "E" element, whereas
..E > .F matches any class "F" element that is a direct subelement of a class
"E" element?

I'm afraid it needs to be mentioned that direct subelement selectors like .E

.F are generally not useful in CSS authoring for the WWW at present or in
the near future, since they are not supported by IE 6. Of course, if you are

prepared to having anything applied to such a selector ignored in most
browsing situations, then it's just fine.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/