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


Tags: html,css

Problem :

<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.



Solution :

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


    CSS Howto..

    How to make cut off in CSS as shown in the attached image?

    How to prevent CSS declaration dropped errors cross browser?

    How can I make the contents of a table cell overflow vertically without also expanding the table cells height?

    bootstrap css, how to make full width div inside container

    How to use images in css with Webpack

    How to hide a nested table?

    How to make table by CSS?

    How to build a mobile version of a non-mobile website? [closed]

    How to edit Skype contact me button CSS?

    How can I include an element within a div without using html?

    How to vertically align text to the middle of a list

    CSS Sub Menu shows up outside body

    How To Add Links To Right Of Header?

    How to retrieve the real height of a #div (including overflowed parts)

    How to make a text with skewed line but not letters?

    How to make first letter lowercase in span with css?

    How to prevent auto-rotating images on iOS on HTML with CSS/Javascript

    How to apply different css margin-top to each children in a list

    How to create different shape in css?

    Javascript: how to append more text to user copied text ala nydailynews.com

    How can I push surrounding elements off screen when enlarging one?

    How do I get a div to be positioned above an image?

    How can i add dotted line in front of menu

    How to connect CSS files to my JSP pages stored in Web-Content (Dynamic Web Project)

    Main navigation, classes on/off. HGelp understanding how this is built

    How can I move text to a new line if it breaks the width of a box?

    How to handle the html and css of one side image and other side content and vice versa

    How to turn off element CSS background when dragged

    How to control the size of a table cell in css

    How to force CSS @media style from JS regardless of screen size?