Nested Div & Span items, What is the correct syntax to reference the object? |
Nested Div & Span items, What is the correct syntax to reference the object? |
chadm |
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! |
Christian J |
Sep 14 2006, 01:36 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,722 Joined: 10-August 06 Member No.: 7 |
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. |
Lo-Fi Version | Time is now: 27th September 2024 - 12:01 AM |