Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Change style based on containing element

Change style based on containing element

Problem

Suppose I have the following html:

This a test of some code.
        
        
    

How do I structure the CSS such that the blocks inside div of class highlight have a different style than that is not wrapped within a div of class highlight? For example, lets say I want them to have a different background color and use different fonts.

Problem courtesy of: SFun28

Solution

div.highlight code {
  /* highlight parent only styles go here */
}

div code {
  /* default div code styles here */
}

code {
  /* default code styles here */
}

Code styles will inherit up the tree shown, so anything in "code" will show up for "div code" AND "div.highlight code", whereas Code in "div code" will show up in "div.higlight code", but NOT in a plain "code" element on its own.

Solution courtesy of: Nick McCormack

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Change style based on containing element

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×