The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Nested Div & Span items, What is the correct syntax to reference the object?
chadm
post Sep 14 2006, 01:20 PM
Post #1





Group: Members
Posts: 1
Joined: 14-September 06
Member No.: 132



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Sep 14 2006, 01:36 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,074
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th March 2019 - 12:05 PM