How to differentiate the common css class by using other css class - html

Question

<div style="position: absolute; left: 0px; top: 5px;" class="v-caption v-caption-top_header">
<div class="v-captiontext">Create User Wizard</div><div style="clear: both; width: 0px; height: 0px; overflow: hidden;">
</div>
</div>
<div style="top: 70px; left: 10px;" class="v-absolutelayout-wrapper">
<div style="height: 5px; width: 1257px;" class="v-label v-label-intro_key intro_key">
</div>
</div>
<div style="position: absolute; left: 10px; top: 55px;" class="v-caption v-caption-intro_key">
<div class="v-captiontext">User Details.
</div>
I have to apply some styles to Create User Wizard text. But I cannot refer v-captiontext css class directly becoz the same css class is used by other text also for example User Detailstext. How can apply changes to only Create User Wizard text.

Answer 1

You can refer to nested classes. In your current HTML you could refer to v-caption-top_header with v-captiontext inside it like this:
.v-caption-top_header .v-captiontext {
...some styles here...
}
or
.v-caption-top_header>.v-captiontext {
...some styles here...
}
(the first of these specifies that v-captiontext is somewhere beneath v-caption-top_header in the DOM, whereas the second one specifies that it is a direct child; ie immediately beneath it in the DOM. The second one is probably preferable, except that it doesn't work in IE6, so if you need to support IE6 then use the first one)
The other options you have would require you to change the HTML code.
You could give the Create User Wizard element a specific ID and use that instead of the class:
<div class='v-captiontext' id='wizard_element'>....</div>
#wizard_element { ..... }
or use multiple classes:
<div class='v-captiontext wizard_element'>....</div>
.wizard_element { ..... }
In this case, the choice between ID or class would depend on whether you is bit of styling on this element is going to be unique - if it is specific to this element then use an ID; if you want to use it elsewhere then use a class.
If you still have problems, you could try using some trickier solutions:
CSS supports attribute selectors, which allow you to select elements based on specific HTML attributes. This can be very useful, but I don't think it'll help you here (since you don't have much in the way of attributes other than styles and classes anyway). Also this again doesn't work in IE6.
Another option could be pseudo-selectors such as :first-child or :nth-child(). Using these you could for example specify that the first matching element gets one style and others get something else. These may actually be useful for you, in conjunction with other techniques above. However you'll have problems with these with all current versions of IE, so probably not recommended.
There's a very good overview of the available CSS selectors, along with which browsers support them at Quirksmode.org: http://www.quirksmode.org/css/contents.html

Answer 2

As the div you want to style a child of v-caption v-caption-top_header but v-caption v-caption-top_header is not the parent of the other div you do not want to touch, this should work:
.v-caption.v-caption-top_header .v-captiontext {
/* whatever style you want */
}
Of course the better approach is simply to add an id="someuniqueid" to the div you would like to style and then add
#someuniqueid { /* style goes here */ }

Answer 3

give it an ID as opposed to CLASS

Answer 4

Is the class v-caption-top_header of the parent div unique? If yes you can use a descendant selector:
.v-caption-top_header .v-captiontext {
...
}
http://www.w3.org/TR/CSS2/selector.html#descendant-selectors