Can I make a single class name style differently for different ids?

I think (?) I can keep reusing the same group of class names, but have them perform different styling for different ids by writing out a single stylesheet for various stories in this fashion:

.bg #story1 {background-color:#ccffff;}
.bg #story2 {background-color:#ffffff;}
.marginL #story1 {margin-left:30px;}
.marginL #story2 {margin-left:20px;}
.accentcolor #story1 {color:#ff00cc;} 
.accentcolor #story2 {color:#00ff66;} 
 etc, etc,

Or is it written the other way 'round, e.g.:

#story1 .bg {background-color:#ccffff;} ?

But I think not, because a browser would only see the first mention of a given id and ignore the rest of the classes since a page is supposed to have only a single occurrence of a given id. Right?

Or would it be advantageous to label each loadable story div by class instead of id for some reason? If I use the above method, would a browser be able to refer to the correct 'version' of a given class if I wrote the html for a given story like this?

<div id="story1" class="marginL bg fontcolor">...</div>

Only one story will ever appear at a time, each being loaded via jQuery into a receptacle division which is pre-stripped of all the page's styling classes except for class="container". Perhaps there's a more elegant way to assign styling to each story loaded without resorting 开发者_Go百科to writing everything out as a string in .css(......) ?? Or should I first call .load of a dedicated stylesheet having jQuery write it in between style tags above the story content??

I've looked everywhere for more information on 'compound selectors' mixing ids with classes, but only find mention of elements combined with class names as for instance:

h1, h2, h3 .myStyle {font...color..etc}

---

Wrong,

in CSS E F matches any F element that is a descendant of an E element.

For unique elements use ids, for repeated elements use classes. If you want to share attribute of your style between repeated elements you can use the same class but wrap them in an enclosing element that has a specific id or class, and use a compound selector:

CSS2 pattern matching selectors.

---

I'm not sure I'm understanding your question, but I'll give you some examples

<div id="story1" class="marginL bg fontcolor">...</div> would be selected #story1.bg (without a space) or otherwise .bg#story1 -- however, best practices would be #id.class

Spaces should only be used when specifying additional nested elements:

<div id="story1" class="marginL bg fontcolor"><span class="story"></span></div> would be selected div#story1.bg span.story. If you're talking about the same elements, keep them all together.

<div><span><em> would be selected in the order: div span em

If you specify .bg {background-color: red;} and then #story1.bg {background-color: blue} the background color for story1 will be blue, as long as you place that line after the initial .bg call (or if you use the !important statement.

Remember: ID's should represent only ONE element and should be unique. Classes can be used multiple times. For example, if you had a set of single news posts from CNN, Fox News, and ABC News you would have:

<div id="cnn" class="news_post">...</div>
<div id="foxnews" class="news_post">...</div>
<div id="abcnews" class="news_post">...</div>

The ID's are unique elements, where a news_post can represent many news posts.

---

Your assumption that #story1 .bg matches just a single occurence is incorrect. You are using the 'descendant' relationship here cf. CSS3 cheat sheet, so this rule will apply to any element with class 'bg' that is a descendant of the element with id 'story1'.

Regarding your questions on how to design your contents. Although I can only guess what your end result would look like, some general advice is to

• use ids for what they are: unique elements
• use classes for reusable styles, elements that fall under a certain "category"
• try to avoid classes that mix pure visual design aesthetics with properties unique to certain kinds of elements, but rather try to group them with respect to the content semantics

To explain the latter: you should avoid using classes like "book-two-pixels-to-the-left" and "green-color-story-with-border-left" but rather focus on the contents of the elements, creating classes for "book" and "story" and share their common features in these classes. Following this principle makes your CSS much more maintainable in the long run. Using purely visual classes is not a bad thing in itself, but if you use them you should clearly separate them from "semantical" classes and keep their properties to a minimum.

So in your case of 'stories' a good start would be to come up with a class "story". It fits the requirements - you have several stories that sure will share some common features and it represents the semantics quite accurately. If clearly separated you can then combine semantic classes with purely functional classes:

<div class="story border-on-top"/>
<div class="story"/>
<div class="story border-on-bottom"/>

---

You're almost right, in that you could specify

.bg { background-color: red; }

And then use:

#story1.bg { background-color: blue; }
#story2.bg { background-color: green; }

But as you'd have to redefine the background-color (or other attributes) every time, it would defeat the purpose of having that attribute defined in the class-name (since it would be re-defined time and time again). As you're trying to style the background-color (or whatever) differently based on the id of the element to which the class is attached, you'd find it more concise (and more maintainable, I'd imagine) to apply the background-color in the id-selector instead:

.bg { /* styles for elements of class 'bg' */ }

#story1 { background-color: blue; }
#story2 { background-color: green; }

Particularly since a class, in css, is really only of benefit to style multiple elements in one place, as opposed to using an id, which is for styling individual elements one at a time.