Why does this CSS mean this?

  • Thread starter Thread starter needin4mation
  • Start date Start date
N

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.
 
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 em.old
Click to expand...
... How could putting the em in front of .old ever make it part of the
.old class?
Click to expand...

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".
 
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?
 
Murray said:
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?
Click to expand...

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
 
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?
 
wouldn't <p class="old">
be more accurate?

Murray said:
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?
Click to expand...
 
Murray said:
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?
Click to expand...

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?
 
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?
Click to expand...

Of course it wouldn't. In this case your select is explicitly applying only
to <p class="old">.
 
Let's say that at best the question is ambiguous to the point of not being
useful.

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


Andrew Murray said:
wouldn't <p class="old">
be more accurate?
Click to expand...
 
Murray said:
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">.
Click to expand...

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.
 
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.
 
Murray said:
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)
Click to expand...

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.
Click to expand...

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
book *was* exactly correct when it translated "p em.old" as "Select any said:
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
Click to expand...
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. :-)
 
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?
 
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.
 
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)
 
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.
Click to expand...

I really think it's just a bad question. It looks like either could be
correct.
 
Murray said:
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?
Click to expand...

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.
 
Back
Top