Inner div has borders - how to override with a class on an outer div?

Hey all - simple CSS newbie question, but I can't seem to enter the right question to ask my friend Google.

If an inner div has a class that adds borders, how can I put that div into an outer div and have that class override those borders?

The whole thing is a third party ListBox. When it is created I am able to add a style (ClassToOverrideBorders) on the outer div in the code behind, but have no control over the inner div which adds borders.

<style>
.UserControlStyle .ClassWithBorders
{
    border: 1px solid #8e8e8e;
    background: #FFF;
}
</style>

<div class="UserControlStyle ClassToOverrideBorders">
    <div class="ClassWithBorders">
  开发者_Python百科    <bunchofcontent />
    </div>
</div>

I suppose could use jQuery to do this (typed, not tested)... $('.UserControlStyle > * .ClassToOverrideBorders').removeClass('ClassWithBorders');

Thoughts? Links to articles on how to accomplish this?

You can use the immediate child selector, and change the border property's value to none:

.UserControlStyle.ClassToOverrideBorders > .ClassWithBorders {
    border: none;
}

Using the 3 class names in this manner gives the rule higher specificity too.

You might try explicitly setting the style through the selectors:

.ClassToOverrideBorders .ClassWithBorders
{
    border: 0;
}

It's all about specificity with the caveat that "!important" can take over occasionally.

If the 3rd party style is:

.ClassWithBorders
{
    border: 1px solid #8e8e8e;
    background: #FFF;
}

Then you can remove those borders with:

.UserControlStyle .ClassWithBorders
{
    border: 0;
    background: #FFF;
}

If, for some reason, this isn't working, try:

.UserControlStyle .ClassWithBorders
{
    border: 0 !important;
    background: #FFF;
}

If this is still not working, the 3rd party tool may be applying border styles via javascript, which you wouldn't be able to override via CSS (because of load & application order) and you'll need to go with a Javascript style change like:

$('.ClassWithBorder').css('border', 0);

.ClassToOverrideBorders > div {
    border: none!important;
}