CSS nesting...

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
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

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.

Re: CSS nesting...

Quoted text here. Click to load it

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>

Then you can use the following selectors in your stylesheet:

.result h1
.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 |
`-------------------------------------------------- --<--@ ------------'

Re: CSS nesting...

Barbara de Zoete wrote:
Quoted text here. Click to load it

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

Re: CSS nesting...

Noozer wrote:

Quoted text here. Click to load it

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.

Site Timeline