applying a rule once only child selector maybe?

#mainContent .container{
    background-image:url("/images/index_33.jpg");
    background-repeat:no-repeat;
    padding-left:85px;
    margin-top:10px;
}

how can only apply those 开发者_JAVA技巧rules to the first div with a class container?

To "apply those rules to the first div with a class container", you need to be a little more specific div.container, and then use the first-child pseudo class.

#mainContent div.container:first-child {
    background-image:url("/images/index_33.jpg");
    background-repeat:no-repeat;
    padding-left:85px;
    margin-top:10px;
}

From w3scools.com:

The :first-child pseudo-class adds a style to an element that is the first child of another element.

.container div:first-child {
 /* ... */
}

use the :first-child pseudo class:

#mainContent div.container:first-child {
  /* CSS rules here */
}

All these answer are wrong, I think. You need to use the first-of-type pseudo-class, not first-child.

try this:

Please Note: For :first-child to work in IE, a DOCTYPE must be declared.(more info)

#mainContent .container div:first-child {
    background-image:url("/images/index_33.jpg");
    background-repeat:no-repeat;
    padding-left:85px;
    margin-top:10px;
}