Stylesheets - Selector for text or <p> after <H2>?

Author

Selector for text or <p> after <H2>?

John Rowe

2005-01-21, 7:21 pm

I run the web site for a University department. A few of
my authors will carefully write:

<h3>Title</h3>
<p>Some text here.</p>
<p>Second paragraph.</p>

Most of us can't be bothered(!):

<h3>Title</h3>
Some text here.
<p>Second paragraph.

I would like my margin under the <h3> to be a little less than my
margin between paragraphs. My problem is that I can't seem to come up
with a selector that distinguishes between the two cases above, ie <h3>
immediately followed by <p> and <h3> followed by text then <p>.

A selector like: h3 + p matches both. Is there a selector for 'naked'
text?

Thanks

John

Philip Herlihy

2005-01-21, 7:21 pm

Will this not be matched by rules for "body"?

--
####################
## PH, London
####################
"John Rowe" <rowe@excc.ex.ac.uk> wrote in message
news:vnbrbiwkze.fsf@kenny.ex.ac.uk...
>I run the web site for a University department. A few of
> my authors will carefully write:
>
> <h3>Title</h3>
> <p>Some text here.</p>
> <p>Second paragraph.</p>
>
> Most of us can't be bothered(!):
>
> <h3>Title</h3>
> Some text here.
> <p>Second paragraph.
>
> I would like my margin under the <h3> to be a little less than my
> margin between paragraphs. My problem is that I can't seem to come up
> with a selector that distinguishes between the two cases above, ie <h3>
> immediately followed by <p> and <h3> followed by text then <p>.
>
> A selector like: h3 + p matches both. Is there a selector for 'naked'
> text?
>
> Thanks
>
> John
>
>

Jukka K. Korpela

2005-01-22, 12:15 pm

John Rowe <rowe@excc.ex.ac.uk> wrote:

> I run the web site for a University department. A few of
> my authors will carefully write:
>
> <h3>Title</h3>
> <p>Some text here.</p>
> <p>Second paragraph.</p>

That's fine (if it's really a 3rd level heading, i.e. a heading for a
subsection of the page), though it's generally a good idea to use id
attributes for all headings (e.g. <h3 id="foo">Title</h3> ). Such attributes
mainly let anyone link to a specific section or subsection, but they can
also be used to style an individual element. There's less temptation to use
a style="..." attribute when you already have an id attribute by which you
can refer to the element simply in CSS (using #foo).

> Most of us can't be bothered(!):
>
> <h3>Title</h3>
> Some text here.
> <p>Second paragraph.

And shouldn't. Loose text isn't good practice. Never was. "Some text here."
is clearly meant to be a paragraph and should be marked up as one. The idea
of <p> as a _separator_ is very obsolete (though it was part of the
original, pre-HTML 2.0 design of HTML). Moreover, it makes it impossible to
style the paragraph since it's not an element and you cannot refer to it in
CSS in any way.

> I would like my margin under the <h3> to be a little less than my
> margin between paragraphs.

Fine. So that's the real problem. One solution:
- use logical markup (the first method you described, with all paragraphs
marked up as paragraphs)
- set margin-top for p to 0 and margin-bottom to the desired value
(say 1em)
- set margin-top and margin-bottom for headings so that margin-top is
fairly large (1.5em might be OK) and margin-bottom is essentially
smaller (like 0.5em).
That way, the vertical space between h3 and p only depends on the
margin-bottom value you have set for h3. Paragraphs will be separated from
each other due to the margin-bottom setting.

This approach has some impact on what you might wish to do e.g. for
a (data) table followed by a paragraph. Since the paragraph now has no top
margin, you would need to set margin-bottom for table to avoid putting the
table and the paragraph too close. But it's usually a good idea to set
some vertical margins for a (data) table anyway.

> My problem is that I can't seem to come up
> with a selector that distinguishes between the two cases above, ie <h3>
> immediately followed by <p> and <h3> followed by text then <p>.

No, what you describe as a problem is just a dead-end attempt at a
solution. Luckily you described the real problem too!

> A selector like: h3 + p matches both.

Yes, but that's not practically very relevant, since IE doesn't support
such selectors at all.

> Is there a selector for 'naked' text?

No, and that's one reason why we should not use any naked text.

--
Yucca, http://www.cs.tut.fi/~jkorpela/