Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > CSS nesting...

Reply
Thread Tools

CSS nesting...

 
 
Noozer
Guest
Posts: n/a
 
      08-10-2005
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.



 
Reply With Quote
 
 
 
 
Barbara de Zoete
Guest
Posts: n/a
 
      08-10-2005
On Wed, 10 Aug 2005 11:20:25 GMT, Noozer <(E-Mail Removed)> 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 |
`-------------------------------------------------- --<--@ ------------'

 
Reply With Quote
 
 
 
 
dingbat@codesmiths.com
Guest
Posts: n/a
 
      08-10-2005
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.

 
Reply With Quote
 
dingbat@codesmiths.com
Guest
Posts: n/a
 
      08-10-2005
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.

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM
Set CSS property equal to another CSS property? Noozer HTML 10 10-13-2004 09:20 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments