Question

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">
      <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?

Answer 1

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.