Why does this CSS mean this?

[needin4mation]

It's from a book I'm reading css in 24 hours (not homework).

It says (pg. 103):

p em.old

"Select any <em> tag that's both part of the class old and within a <p>
tag."

Why is this not

p.old em

I thought the generic selector for p tags would come first, then the
class. I thought that by putting the class first, the .old, that
everything after that is supposed to be within the old class. How
could putting the em in front of .old ever make it part of the .old
class? Thanks.

 

[Murray]

Why is this not

p.old em

It is. Vivid demonstration of how useful most of those 'dummy' type books
are, no?

 

[P@tty Ayers]

Huh? Aren't they two completely different selectors?

p em.old :
Selects any em element with a class attribute that contains the word old
that is a descendant of a p element.

p.old em :
Selects any em element that is a descendant of a p element with a class
attribute that contains the word old.

 

[P@tty Ayers]

p em.old

... How could putting the em in front of .old ever make it part of the
.old class?

Because writing the class name directly after the "em" separated only by a
dot is correct syntax for "an em element with the class "old".

 

[Murray]

The instructions say this -

"Select any <em> tag that's both part of the class old and within a <p>
tag."

This markup defines the paragraph as being a container with class "old" -

p.old em

The em is clearly part of that class. *And* it's within a <p> tag.

No?

 

[P@tty Ayers]

The instructions say this -

"Select any <em> tag that's both part of the class old and within a <p>
tag."

This markup defines the paragraph as being a container with class "old" -

p.old em

The em is clearly part of that class. *And* it's within a <p> tag.

No?

Hm... it's my understanding that in "p.old em", the em isn't part of the
class "old".

In situations like this, I love this thing of Eric Meyer's:
http://gallery.theopalgroup.com/selectoracle/. It gave me the quote I used
in my first post translating the meaning of "p.old em", and it doesn't say
that the "em" is part of the class "old".

But if I'm wrong, I won't be all that surprised. :-D

 

[Murray]

Consider this -

<div class="old"><p>

would you say that the <p> is part of the class "old"? I would.

If .old { font-weight:bold;color:red; }

then you will surely have bold/red content in the <p> container, no?

 

[Andrew Murray]

wouldn't <p class="old">
be more accurate?

Consider this -

<div class="old"><p>

would you say that the <p> is part of the class "old"? I would.

If .old { font-weight:bold;color:red; }

then you will surely have bold/red content in the <p> container, no?

 

[P@tty Ayers]

Consider this -

<div class="old"><p>

would you say that the <p> is part of the class "old"? I would.

If .old { font-weight:bold;color:red; }

then you will surely have bold/red content in the <p> container, no?

Ok, yes, the styles of that class would be applied to the <p> via
inheritance, but that doesn't mean that the <p> is part of that class, I
didn't think, anyway. Aren't those two slightly different things?

In your example above, if you wrote this additional rule:

p.old { font-size: 24px }

I don't think the style would get applied to the <p>. There's no <p> with
the class "old", only a <p> inside of a <div> with the class "old".
Different, isn't it?

 

[Murray]

Aren't those two slightly different things?

No, I don't think so. Any child element of a container with a class is part
of that class unless there is some higher specificity selector at play.

I don't think the style would get applied to the <p>. There's no <p> with
the class "old", only a <p> inside of a <div> with the class "old".
Different, isn't it?

Of course it wouldn't. In this case your select is explicitly applying only
to <p class="old">.

 

[Murray]

Let's say that at best the question is ambiguous to the point of not being
useful.

--
Murray
--------------
MVP FrontPage

wouldn't <p class="old">
be more accurate?

 

[P@tty Ayers]

No, I don't think so. Any child element of a container with a class is
part of that class unless there is some higher specificity selector at
play.


Of course it wouldn't. In this case your select is explicitly applying
only to <p class="old">.

That's my point. The two selectors that the original poster presented mean
two different things. His second one wasn't a correction of the first one,
but another selector which means something different than the first. The
book was right. His suggested correction wasn't. It's no big deal, but I'm
just saying.

 

[Murray]

OP said this -

'It says (pg. 103):

p em.old

"Select any <em> tag that's both part of the class old and within a <p>
tag."

Why is this not

p.old em'

In both cases, em is part of the class old. I don't see how you can argue
otherwise, and so far, you haven't! 8)

In both cases, modifications to the class old will be expressed (to the
extent that they can) by the content of the <em> tag - color, size, weight,
etc.

In both cases, the <em> tag would have to be within a <p> tag.

Do the two examples above mean two different things? Yes. In the first
case, only descendents of the <em class="old"> will belong to the old class.
In the second case, only descendents of the <p class="old"> will belong to
the old class. In both cases, <em> is part of the old class.

 

[P@tty Ayers]

OP said this -

'It says (pg. 103):

p em.old

"Select any <em> tag that's both part of the class old and within a <p>
tag."

Why is this not

p.old em'

In both cases, em is part of the class old. I don't see how you can argue
otherwise, and so far, you haven't! 8)

True. The terminology you're using - "em is part of the class old" - sounds
a little odd to me, and that's why I questioned it. But I think I understand

Do the two examples above mean two different things? Yes. In the first
case, only descendents of the <em class="old"> will belong to the old
class. In the second case, only descendents of the <p class="old"> will
belong to the old class. In both cases, <em> is part of the old class.

True, agreed. What I have been trying to do is to respond to the
mis-statement in the OP's post, and to your post stating that the book was
wrong and that the selector the OP suggested was a more accurate one. The

tag." The selector the OP proposed as somehow more correct, "p.old em", is
a different selector which should be translated as "Selects any em element
that is a descendant of a p element with a class

attribute that contains the word old."

The OP's rationale for thinking that the selector should be written
differently was based on an incorrect understanding of CSS syntax, which you
can easily see in the last paragraph of his post. I was trying to address
that.

I don't see how you can argue otherwise, and you haven't yet.

 

[Murray]

I see that we have interpreted the original post in slightly different ways.

When I read it, I understood it to mean that the text gave on unequivocal
answer, and the OP was pointing out that that answer was sufficient, but not
necessary - i.e., the question was worded in an ambiguous way, and could
therefore have two answers. I agreed with that interpretation, and said
that it gave an illustration of why many (some? all?) of those kinds of
books were of dubious value.

Have we been sparring over nothing? 8) Perhaps it was your subsequent posts
I misinterpreted?

 

[Jens Peter Karlsen [FP-MVP]]

Let's see if we can shed some light on this:

Test case:
<p>Some <em class="old">text</em></p>
The above will be caught by the first style as there is an em tag with
the class old within a p tag. It will however not be caught by the
second style as p doesn't have a class called old.
You can describe the second style as such:
"Select any em tag that is within a p tag that has the class old".
See the difference?

In my opinion this notation should be avoided as it is easy to lose
sight of just what is covered by it.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.

 

[Murray]

Exactly correct and unambiguous. Unfortunately, the 24 hours within which
you were expected to learn this CSS didn't allow time for such precision. 8)

 

[needin4mation]

It's from a book I'm reading css in 24 hours (not homework).

It says (pg. 103):

p em.old

"Select any <em> tag that's both part of the class old and within a <p>
tag."

Why is this not

p.old em

I thought the generic selector for p tags would come first, then the
class. I thought that by putting the class first, the .old, that
everything after that is supposed to be within the old class. How
could putting the em in front of .old ever make it part of the .old
class? Thanks.

I really think it's just a bad question. It looks like either could be
correct.

 

[Murray]

That's the ticket. Definitely true.

 

[P@tty Ayers]

I see that we have interpreted the original post in slightly different
ways.

When I read it, I understood it to mean that the text gave on unequivocal
answer, and the OP was pointing out that that answer was sufficient, but
not necessary - i.e., the question was worded in an ambiguous way, and
could therefore have two answers. I agreed with that interpretation, and
said that it gave an illustration of why many (some? all?) of those kinds
of books were of dubious value.

Have we been sparring over nothing? 8) Perhaps it was your subsequent
posts I misinterpreted?

Well, it's not of earth-shaking importance, and I really don't mean to spar
over it. But I have to disagree that the book's text was ambiguous and that
there were two answers. To my understanding, the book was clear and correct,
and the OP's suggested more accurate selector was not, in fact, more
accurate, but rather means something different.

Having said that, it's a pretty minor matter.