473,394 Members | 1,721 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,394 software developers and data experts.

CSS2 specification: What is BODY > P { line-height: 1.3 } ?

Hi

I am a newbie struggling a little with css.It is hard to get it right
in all browsers, so i decided to read the CSS2 specification on the w3
site.
What is the following from the CSS2 specification:

"Quote starts":

5.6 Child selectors
A child selector matches when an element is the child [p. 30] of some
element. A
child selector is made up of two or more selectors separated by ">".
Example(s):
The following rule sets the style of all P elements that are children
of BODY:
BODY > P { line-height: 1.3 } /* OP note: What is this line?*/
Example(s):
The following example combines descendant selectors and child
selectors:
DIV OL>LI P
It matches a P element that is a descendant of an LI; the LI element
must be
the child of an OL element; the OL element must be a descendant of a
DIV.
Notice that the optional whitespace around the ">" combinator has been
left out.
For information on selecting the first child of an element, please see
the
section on the :first-child [p. 62] pseudo-class below.

"Quote ends":

That line with the ">" sign gets me.I have tried several things in my
notepad editor to test it but it doesn't work for me.
In the above example, all P within the BODY should have the style
applied to them, so i did the following in my editor and ran it with
I.E 6.0, N.N. 7.1 and Mozilla 1.4:

<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE TYPE="text/css">
BODY > P {color: red}
</STYLE>
</HEAD>
<BODY>
<P>My name is Patrick</P>
</BODY>
<P>My name is Kristina</P>
</HTML>

Both sentences within <P> tags turn out red in Mozilla and N.N. and
remain black in I.E.
Now i understand that i am probably not supposed to place a P tag
outside of a BODY tag but since the CSS2 specification chooses that
example i had no choice.
From what i understand of the BODY > P {color: red} style, in my
example the sentence "My name is Patrick" should be red because that P
is within the BODY tag and "My name is Kristina" should remain black
because its P is outside the BODY tag.I don't get it?

Thanks to the pros for helping a struggling (But determined) CSS
student.

Patrick
Jul 20 '05 #1
6 7467
The > selector selects only immediate children, not children of children
or further nesting.

body > p {...}

matches

....
<body>
<p>this</p>
<div>
<p>but not this</p>
</div>
</body>
....

It doesn't work at all on Internet Explorer for Windows.

--
Some say the Wired doesn't have political borders like the real world,
but there are far too many nonsense-spouting anarchists or idiots who
think that pranks are a revolution.

Jul 20 '05 #2
va******@netzero.net (Patrick) wrote in
news:a3**************************@posting.google.c om:
<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE TYPE="text/css">
BODY > P {color: red}
</STYLE>
</HEAD>
<BODY>
<P>My name is Patrick</P>
</BODY>
<P>My name is Kristina</P>
</HTML>

Both sentences within <P> tags turn out red in Mozilla and N.N. and
remain black in I.E.
They remain black in IE because IE doesn't support child selectors.
Now i understand that i am probably not supposed to place a P tag
outside of a BODY tag but since the CSS2 specification chooses that
example i had no choice.
From what i understand of the BODY > P {color: red} style, in my
example the sentence "My name is Patrick" should be red because that P
is within the BODY tag and "My name is Kristina" should remain black
because its P is outside the BODY tag.I don't get it?


What you're not getting is the difference between a *child* element and a
*descendant* element. All P elements, by the rules of HTML, have to be
*descendants* of BODY (i.e. they can't appear before <BODY> or after
<BODY>), but they don't have to be *children* of it. Consider:

<body>
<p>This paragraph is a child of the body element.</p>
<ul>
<li>
<p>This paragraph, being the first one inside a list, is not a child
of the body element, even though it's a descendant of it.
It's a child of the li element that it's enclosed in.
</p>
</li>
</ul>
</body>

If you were to write

li > p {background: blue;}
body > p {background: red;}

then the first paragraph would be in red but the second would be in blue.
If, on the other hand, you used descendant selectors ("li p" and "body p")
rather than child selectors, both paragraphs would come out red because the
second rule would override the first.
Jul 20 '05 #3
va******@netzero.net (Patrick) wrote:
What is the following from the CSS2 specification:

"Quote starts":

5.6 Child selectors .... BODY > P { line-height: 1.3 } /* OP note: What is this line?*/
"Line height" is the vertical distance
from the bottom of THIS word
to the bottom of THIS word.
It is a multiple, greater than 1 unless you're clowning around, of the
font-size.

Child selector is poorly worded in the spec - it means "immediate
child" - see Owen's nearby post.

In the above example, all P within the BODY should have the style
applied to them, so i did the following in my editor and ran it with
I.E 6.0, N.N. 7.1 and Mozilla 1.4:

<HTML>
<HEAD>
<TITLE>Test</TITLE>
<STYLE TYPE="text/css">
BODY > P {color: red}
</STYLE>
</HEAD>
<BODY>
<P>My name is Patrick</P>
</BODY>
<P>My name is Kristina</P>
</HTML>

Both sentences within <P> tags turn out red in Mozilla and N.N. and
remain black in I.E.
Now i understand that i am probably not supposed to place a P tag
outside of a BODY tag but since the CSS2 specification chooses that
example i had no choice.
From what i understand of the BODY > P {color: red} style, in my
example the sentence "My name is Patrick" should be red because that P
is within the BODY tag and "My name is Kristina" should remain black
because its P is outside the BODY tag.I don't get it?


That's a long standing Mozilla bug, failing to recognize the </body>
tag, and IE is simply ignoring the ruleset completely because it
doesn't implement child selectors.
Jul 20 '05 #4
To Owen Jacobson:

You wrote:"The > selector selects only immediate children, not
children of children or further nesting."

Thanks so much Owen.One line and a half from you and i got it now.

To Eric Bohlman:

You wrote:"They remain black in IE because IE doesn't support child
selectors."

I will make a note of that.

You wrote:"What you're not getting is the difference between a *child*
element and a *descendant* element."

You are right Eric, well you were right really, because thanks to you
and the other posters i got it now.I am glad i posted because it would
have bothered me for days.Thanks so much!

To Karl Smith:

You wrote:"Child selector is poorly worded in the spec - it means
"immediate
child" - see Owen's nearby post."

I did and got the difference between child element and descendant
element.Thanks Karl for your help.

Thanks to the three of you, i got it and can move on.

Regards

Patrick
Jul 20 '05 #5
Karl Smith wrote:
That's a long standing Mozilla bug, failing to recognize the </body>
tag, and IE is simply ignoring the ruleset completely because it
doesn't implement child selectors.


A proper implementation of </body> would refuse to display anything
following the closing tag?
Jul 20 '05 #6
"Firas D." <fd********@firasd.org> wrote:
Karl Smith wrote:
That's a long standing Mozilla bug, failing to recognize the </body>
tag, and IE is simply ignoring the ruleset completely because it
doesn't implement child selectors.


A proper implementation of </body> would refuse to display anything
following the closing tag?


No, I think the OP's expectation was correct. His P after BODY should
be displayed, but it certainly shouldn't match a selector like "body >
p".

Why browsers continue to format after an </html> tag is easier to
understand, that's an obvious error. An XML parser will halt with some
message along the lines of, "Junk after document - only whitespace
allowed," and an error correcting HTML parser infers the location of
</html> at the very end of the doc as soon as it passes <html>,
ignoring any "extra" </html>.

But it shouldn't error-correct by ignoring the closing </body> tag
where the author wrote it, and automatically inserting one where
Mozilla thinks it usually goes. If the doc is tag soup and the browser
has to interpolate extra elements to compensate, fair enough. But if
the doc is a proper tree of elements, the "error correction" is just
plain interference.

The earliest HTML documents had the structure: title, body, address.
Address got moved to inside body later on. I wonder what Mozilla would
make of one of those fossils if one could be found?

--
Karl Smith.
Jul 20 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Neil Zanella | last post by:
Hello, I would like to know what the major enhancements of CSS2 over CSS1 are and whether CSS2 support is any better these days than it was a few years ago. In particular, do most browsers fully...
12
by: Michael Winter | last post by:
Is it possible to test for CSS level 2 support, preferably using just CSS2? For example, the following could alert the user that their browser doesn't support CSS1 or 2. Is there an equivalent for...
2
by: Jan Roland Eriksson | last post by:
The following URL... <http://www.w3.org/TR/CSS21/> ....has had the following text in it for a considerable time now. "This is a W3C Candidate Recommendation, which means the specification...
6
by: rob | last post by:
Hi I'm trying to create a "roll-up" effect when a window loses focus and then "roll-down" when it regains focus. This statement works properly with every browser I can get my hands on EXCEPT...
15
by: Matthias Hullin | last post by:
Hi, I'm programming some PHP discussion board that is supposed to appear inside the content area of a proprietary CMS. As I need some more styles than the standard stylesheet provides, I just...
2
by: David E. Ross | last post by:
A new working draft of the CSS2.1 specification was published on-line on 11 April. Does anyone know what changed since the previous (13 June 2005) working draft? -- David E. Ross...
12
by: Mark Rae | last post by:
Hi, It's easy enough for a child page to manipulate its MasterPage's header simply by modifying the MasterPage thus: <header runat="server"> .... .... </header>
3
by: Jasper | last post by:
hi everybody, i'm just stepping in the world called css and can't seem to solve this little problem: i wanted a nice red lining in my otherwise green website, so wrote this in my external...
23
by: Xah | last post by:
Here's a interesting case of invalid html 4 strict file. In summary, if you have <body></bodywithout any content, the file would be invalid under html 4 strict. Valid if html 4 lose. <!DOCTYPE...
1
by: Jean Pierre Daviau | last post by:
Hi, I am looking for a pdf version of CSS2.1 Specification Thanks -- Jean Pierre Daviau
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.