Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Cascading Style Sheets _ Nested Div & Span items

Posted by: chadm Sep 14 2006, 01:20 PM

We have the code:

CODE

<div class="item">
  
  <div class="itemHead">
    <span class="itemTitle">The HEADER</span>
  </div>


  <div class="itemBody">
    <div class="itemText">
      This is the body of the page.
    </div>
  </div>
</div>

We know we can style each class:
.item {font: arial; }
.itemHead {font-weight: bold; }
.itemBody {font-weight: normal; }

Our question:

How can we change the style on the span tag with the class "itemTitle" ONLY when it's in the div tag with the class "itemHead?" IN the example above, we want to change the style characteristics of the words "The HEADER" to something else.

Thanks for any help!

Posted by: Christian J Sep 14 2006, 01:36 PM

QUOTE(chadm @ Sep 14 2006, 08:20 PM)

How can we change the style on the span tag with the class "itemTitle" ONLY when it's in the div tag with the class "itemHead?" IN the example above, we want to change the style characteristics of the words "The HEADER" to something else.

You can use contextual selectors, like

CODE

.itemHead .itemTitle {...}

or (to be even more specific):

CODE

div.itemHead span.itemTitle {...}

See also http://htmlhelp.com/reference/css/structure.html and http://www.w3.org/TR/CSS21/selector.html

Side-note: you should try to use more semantically meaningful elements such as headers (H1 etc), paragraphs (P) and lists (UL etc). DIV and SPAN are meant as last resorts when nothing else fits.