Help - Search - Members - Calendar
Full Version: Nested Div & Span items
HTMLHelp Forums > Web Authoring > Cascading Style Sheets
chadm
We have the code:

CODE
<div class="item">
  <!-- item header -->
  <div class="itemHead">
    <span class="itemTitle">The HEADER</span>    
  </div>      

<!-- Body of page -->
  <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!
Christian J
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.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2019 Invision Power Services, Inc.