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


Tags: css

Problem :

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?



Solution :

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.


    CSS Howto..

    How to get jQuery to recognize mouse over image once per hover

    How to add hover effect to using CKEditor?
    Here is a script to highlight columns where there is checkmarks with an orange background-color. var CKE = $( '.editor' ); CKE.ckeditor(); var columnIndex=0; $("#update").click(function(){ // Output CKEditor's result in...
    Read more

    How to set height to wrap text only in certain screen size

    How do I keep a span from being at the end of a line?

    how to make jquery transition smoothly

    how do I select a single tag in the middle of many of the same in CSS?

    How to display separate paragraphs in the same area using CSS HTML

    How to change the font-size of the part of textarea text in HTML,CSS?

    How to replace non-existing images with a default one in css?

    How do I refactor my CSS? [duplicate]

    How to center float list elements inside an unordered list

    How to make a stable two column layout in HTML/CSS

    How to show color only to the first li?

    With HTML and CSS, how to have an image that is vertically aligned with a horizontal line?

    How to remove captcha image and it's textbox using css?

    How do I use transitionend in jQuery?

    How to make a div with arrowlike side without css border tricks?

    How to highlight selected tab in Web Forms including Master Page

    How to show/hide hidden HTML table rows using JavaScript (no jQuery)

    How can I make html table columns (only the ones with text) evenly spaced

    How to highlight the parent item in active state without the children being affected in wordpress navigation?

    Using CSS alone, how can you have a Border-bottom gradient from Right to Left?

    How do I require main.css.erb in application.css

    How to target a specific element of a div in CSS?

    How to center text in the middle of the responsive circle, (text is responsive too)?[css/html only]

    HTML: slideshow is not recognised as an element in the main content of the page

    How can I put two divs shaped as circles next to each other?

    How do I make text text when you hover the mouse over it?

    How to break a table with CSS diagonally or vertically?

    How to line up a label to the right of a styled checkbox