CSS nesting...

Discussion in 'HTML' started by Noozer, Aug 10, 2005.

  1. Noozer

    Noozer Guest

    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.
     
    Noozer, Aug 10, 2005
    #1
    1. Advertising

  2. On Wed, 10 Aug 2005 11:20:25 GMT, Noozer <> wrote:

    > 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 |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Aug 10, 2005
    #2
    1. Advertising

  3. Noozer

    Guest

    Barbara de Zoete wrote:
    > 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.
     
    , Aug 10, 2005
    #3
  4. Noozer

    Guest

    Noozer wrote:

    > <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.
     
    , Aug 10, 2005
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DeadlyTedly
    Replies:
    2
    Views:
    2,584
    Ted Bradley
    Oct 16, 2003
  2. Edward

    Nesting Datagrids

    Edward, Nov 11, 2003, in forum: ASP .Net
    Replies:
    3
    Views:
    2,370
    Guest
    Nov 11, 2003
  3. John

    Nesting Datagrids

    John, Nov 11, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    364
  4. Nesting (?) CSS

    , Nov 2, 2005, in forum: HTML
    Replies:
    3
    Views:
    2,560
    Neredbojias
    Nov 2, 2005
  5. Trans
    Replies:
    10
    Views:
    327
    Sean O'Halpin
    Sep 16, 2005
Loading...

Share This Page