If I want a style to have all of the properties of the style defined in ".a .b .c" except for background-color (or some other property), how is this done? This does not seem to work.
".a .b .c { background-color: #0000FF; color: #ffffff; border: 1px solid #c0c0c0; margin-top: 4px; padding: 3px; text-align: center; font-weight: bold; }
.a .b .c .d { background-color: green; }"
.a, .b, .c {color: #ffffff; border: 1px solid #c0c0c0; margin-top: 4px; padding: 3px; text-align: center; font-weight: bold; }
.a {background-color: red;}
.b {background-color: blue;}
.c {background-color: green;}
You would add the .d class selector as a selector for your first rule, then add a rule to redefine the background color for .d:
.a .b .c,
.d {
background-color: #0000FF;
color: #ffffff;
border: 1px solid #c0c0c0;
margin-top: 4px;
padding: 3px;
text-align: center;
font-weight: bold;
}
.d {
background-color: green;
}
That is the answer to the question that you've asked, but I have a feeling that this is not what you are looking for. Maybe you should post an example of your markup and tell us what styles you would like to see applied so we can help you better.
It seems you've got things mixed up there. If you want to apply the properties in the first set of brackets to ".d" as well it will need to be specified in the selector list. You also need to separate the selectors with commas so they become a list, not an inheritance.
Example:
<html>
<head>
<style type="text/css">
.a, .b, .c, .d { background-color: #0000FF; color: #FF0000; border: 1px solid #00FF00; font-weight: bold; }
.d { background-color: white; }
</style>
</head>
<body style="background-color: grey;">
<p class="a">Lorem ipsum dolor sit amet.</p>
<p class="b">Lorem ipsum dolor sit amet.</p>
<p class="c">Lorem ipsum dolor sit amet.</p>
<p class="d">Lorem ipsum dolor sit amet.</p>
</body>
</html>
I think you're thinking about this a little backwards, so let's try to sort out the language your are using.
.a .b .c{
background-color: #0000FF;
color: #ffffff;
}
Looking at the above CSS, the ".a .b .c" part is the selector, and the part between the braces is the style. That selector says 'find me all of the elements with a class with "c" who are inside of elements that have a class of "b" who are inside of elements with a class "a", and apply these styles to them' -- it's a rule the says which elements on the page will get the look you want.
More than one selector can match the same element on the page, and there are rules for what order they are applied to the element (http://www.w3.org/TR/CSS2/cascade.html). The simple rule is that more "Specific" selectors override less "specific" selectors. "div.blueBanner p a:hover.highlight" is much more "specific" than ".blueBanner". If two rules have the same specificity, then the one that comes later in the CSS file overrides.
html sample:
<div class="a">
<div class="b">
<div class="c">foo</div>
<div class="c d">bar</div>
</div>
</div>
So, you have a selector ".a .b .c" (as you listed above) and two elements (foo and bar) on the page match that selector, so they all get the background color and all the other styles you defined.
Now, you also want the second element to have a green background color. It has another class assigned to it "d", so you can just define another selector which matches only that second element ".a .b .d" and set's it's background-color. The "bar" element still gets all the other styles from the ".a .b .c" selector (font, color, etc), but the background color from ".a .b .d".