1

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?

Thad Peiffer
  • 638
  • 1
  • 7
  • 22
  • why don't you edit the stylesheet? in your code if you set the `border` to `0px` it would remove it .. – Gabriele Petrioli Feb 11 '11 at 14:18
  • I couldn't do that because then every instance of their control would not have the border. It's only when I embed their control in another one that the borders are not appropriate. For clarity, I didn't add too many pieces of info to my initial post... – Thad Peiffer Feb 11 '11 at 14:35

4 Answers4

5

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.

Andy E
  • 338,112
  • 86
  • 474
  • 445
  • Thank you! This worked great, but I had to add the !important tag to it to get it to override the inner class. Thanks!! – Thad Peiffer Feb 11 '11 at 14:28
  • @Thad: you might want to rethink `!important` ([see here](http://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css/3706876#3706876)). I've updated my answer to increase the specificity - perhaps that will work for you without requiring `!important`? – Andy E Feb 11 '11 at 14:30
  • 1
    Done, done, and done! Working perfectly and no need for !important. Thanks!! – Thad Peiffer Feb 11 '11 at 15:07
0

You might try explicitly setting the style through the selectors:

.ClassToOverrideBorders .ClassWithBorders
{
    border: 0;
}
Joel Etherton
  • 37,325
  • 10
  • 89
  • 104
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);
Walker
  • 633
  • 1
  • 5
  • 14
  • I wouldn't recommend using `!important` blindly - it would be better to try and get to the root of why something isn't working. – Andy E Feb 11 '11 at 14:20
  • Thanks for the additional details on this, along with the jQuery example! My initial jQuery statement would have removed ALL formatting applied by ClassWithBorders, which may not have been appropriate. – Thad Peiffer Feb 11 '11 at 14:32
  • @Andy E - I totally agree. Unfortunately, CSS & Javascript are very reliant on the _whole_ DOM and we generally just get snippets here. – Walker Feb 11 '11 at 14:37
0
.ClassToOverrideBorders > div {
    border: none!important;
}
Gustavo Costa De Oliveira
  • 7,454
  • 2
  • 22
  • 22