How to exclude some inner divs/elements from inherting parent css property

Well, I though of that, There will other upper elemnts which may have impact, hence just dont  want .xMain div to apply to to these element, rest all it should inherit

What you're trying to accomplsh can't be done without using a more specific selector. You need to find a way to mark with a class name or a specific attribute, but you can only use attribute selectors for IE6+ the exact div's you want to keep the default styles or overwrite the styles defined by you with .xMain div { }.

what about fire fox and safari

If it is possible FF >2.0, give some samples.

Try this:

<style type="text/css"/>
.xMain {background-color:#fc0; display:block; overflow:hidden;}/*--CSS for emphasizing purpose--*/
.xMain div{float:left;display:inline;overflow: hidden; /*--your original CSS--*/
background-color:#f00; margin:5px;/*--CSS for emphasizing purpose--*/
}
.xMain div[title~="marker"] {background-color:transparent;}
.xMain div.markerClass {background-color:transparent;}
</style>

Err, tags got replaced in comment so here goes the HTML structure

<div class="xMain">
	<div title="marker attribute">###</div>
	<div class="markerClass">###</div>
	<div>##</div>
	<div>##</div>
	<div>##</div>
	<div>##</div>
	<div>##</div>
</div>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:

can you provide a small sample , with full code.

with class name approach

I did. I assume you're not inserting the DIV elements on your own and you have some script that generates that markup. In the above snippet, for the DIV elements you want to rewrite CSS properties, you need to alter the script so that whenever it's about to generate a DIV element that you don't want to inherit the properties, you just create a conditional to append  class="markerClass". Then the CSS code provided above should do the rest.

Its working firefox, but not in I.E8

and ~= does not work, it only takes =

It works in IE8 as well. The fact that the 2nd element has a transparent background proves it. The attribute approach (first element) seems I was wrong about. IE8 is unable to figure out what the CSS says.

I am looking for a not equal to select for id or classname, is it possible.

You mean you want to generate a class for the elements you actually WANT to inherit the properties ?

see its like this:

in css,
I want specify like this

.xMAin div[class or id not equal to maker] : {......}

I want specify like this

.xMAin div[class or id not equal to maker]   {......}

If we're talking about CSS Level 3, there's the :not selector available, but it's poorly supported across browsers. Firefox, Chrome and Safari (not sure about this one) have support for it.
Here's what I suggest though, because we seem to be drifting away from the problem.
From what I understand, you wish to style only certain < div > tags nested within the < div > tag that has a class "xMain".
Say you have the markup generated something like the snippet below. What you need to do in this case is choose one of the following:
- either you style the elements that actually need styling by specifing the class name:
.xMain div.iCanInheritTheStyle {...}
- or you can style the child div elements globally by using your original css
.xMain div {...}
and then revert back the styles to the default values for the elements you wish to be left alone, by using:
.xMain div.keepMeOnDefaultStyles {...}

Either solution requires you to generate a class name on one of the types of elements. Else there's no way for the CSS or the browser for that matter to figure out which element you're trying to tell him to not style.

<div class="xMain">
	<div class="iCanInheritTheStyle">###</div>
	<div class="keepMeOnDefaultStyles">###</div>
	<div class="iCanInheritTheStyle">##</div>
	<div class="iCanInheritTheStyle">##</div>
	<div class="iCanInheritTheStyle">##</div>
	<div class="iCanInheritTheStyle">##</div>
	<div class="keepMeOnDefaultStyles">##</div>
</div>

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:

See the actuall problem:

Most of inner divs will follow

.XMain div {}


but there are few, which will inherit from other top order element but not .xMain din one,

The cascading effect of .xMain div, is causing problem for this div,
hence I dont want these few to get .xMain div values, but on ther other hand i dont know the css values of these few divs , it will be inherited from some top order element, which i cant decode.

I see. In that case easiest way is still to generate some class for "these few div's" and when you wish to ignore them, you actually overwrite their values (hopefully you know which css properties get changed) by using a more specific selector, using the generated class name ( for example i called it "keepMeOnDefaultStyles").

If that still doesn't work, you'd have to resort to javascript and more specifically the jQuery library, which has a very good support for selectors. You could use that to fix the CSS for those elements. (Also has a good implementation of :not selectors)

Can give example

The jquery not selector.

Do you know, php or have mac installation. if so I will upload my code and increase thepoint.

do you have Mac OS x 10.6 with firefox 2 and safari

I'm running on Win Vista atm, I don't own a Mac, but at home I have a unix machine which can pretty much replicate your computing environment.
Anyway, here's a link about how to use the hasClass method
http://docs.jquery.com/Traversing/hasClass (could be useful for your purpose)
and the " :not() " selector http://docs.jquery.com/Selectors/not#selector

Explanations should be pretty straight forward and hopefully suit your purpose.

how to do we implement .xMain div not here(jquery)