CSS nesting...

[Noozer]

I have the following CSS classes defined... "result", "row" and "title"

How do I declare each of these in my CSS page so that row and title will
only be applied when within elements with the "result" class?

For example...

<div class="result">
<span class="title">My Example</span>
<span class="row">This is the first row.</span>
<span class="row">
<span class="title">My Subtitle</span>
<p>This text is part of the second row. It should have a title above
it</p>
</span>
</span>
</span>
</div>

Right now, in my CSS file I have...

..results {
background-color: red;
}

..results .row {
display: block;
white-space: nowrap;
}

..results .title {
font-weight: bold;
text-align: center;
background-color: green;
}

....but if I put a "title" span within a "row" span, it doesn't apply the
"title" styling.

 

[Barbara de Zoete]

I have the following CSS classes defined... "result", "row" and "title"

How do I declare each of these in my CSS page so that row and title will
only be applied when within elements with the "result" class?

For example...

<div class="result">
<span class="title">My Example</span>
<span class="row">This is the first row.</span>
<span class="row">
<span class="title">My Subtitle</span>
<p>This text is part of the second row. It should have a title above
it</p>
</span>
</span>
</span>
</div>

This is a very strange use of span. Besides that: you cannot nest a paragraph
inside a span. A span is an inline element. A paragraph is a block level
element. Can't have block level elements inside inline elements.

Why do you not just use headers and paragraphs? What is the effect you're after?

<div class="result">
<h1>My Example</h1>
<p class="first-row">This is the first row</p> <!-- what's with that 'row'
stuff? -->
<h2>My Subtitle</h2>
<p>This text is part of the second row. It should have a title above it</p>
</div>

Then you can use the following selectors in your stylesheet:

..result
..result h1
p.first-row
..result h2
..result p

I bet all styles you could want/need fit with these five selectors.

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

 

[dingbat]

Why do you not just use headers and paragraphs?

HTML doesn't have a "header" element, it only has headers with explicit
levels attached to them. There are many cases where you're generating
HTML dynamically and it's quite hard to keep track of these - much
easier to simply spew them out with appropriate nesting, but no
indication of level, then describe this later through CSS. There are
even cases of arbitrary nested trees etc. where any notion of "header
level" is simply wrong - all you have is relative nesting, and the wish
to put some coloured stripes around with CSS to make it easier to
eyeball.

 

[dingbat]

<div class="result">

.results {

Typo. Result or results ?


Check the content model of <span> vs. <div> too. I'd expect to be
using <div> here more than <span>

Always get worried when you set <span>s to be display:block, or <div>s
to be display:inline; You can do it, there are sometimes good reasons
to be doing it, but they tend to be the minority.