How do you overide the parent css in a sub div?

HTML & CSS
1

Hello guys,
I am developing a project with .net and using css.

However I have a parent div below, which I add .net controls ( which are similar to server side includes, which has its own formatting )

However the controls and the nested divs inherit the css values of the main div.

How do I overide this ?

here is my code, many thanks

M


div.menu:hover div.popup {
    background-position: center bottom;
    position: absolute;
    display: block;
    right: 5%;
    width: 600px;
    height: 400px;
    border-bottom: ridge;
    width: 90%;
    margin: 0 auto;
    box-shadow: 3px 3px 10px 5px #000; /* */
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    border-radius: -5px;
    -moz-border-radius: 25px;
    top: 31px;
    border-style: solid;
    background-color: #FFFFFF;
    font-family: verdana, Geneva, Tahoma, sans-serif;
    font-size: 10px;
    font-weight: normal;


    border-right: none;
    border-top: thick;
    border-top-width: thick;
    border-bottom-width: medium;
    border-top-color: red;
    border-top: solid;

    border-top-width: 5px;
    border-top-color: #FF0000;
    border-right-color: inherit;
    border-bottom-color: #000000;
    border-left-color: #000000;
    border-right-width: medium;
     z-index:12;
}
2

You really just have to set styes for the inner elements that override these parent rules. Only a few of the above rules get inherited by children, though. It’s better not to set things like font sizes on the parent unless you really need to.

3

It’s better not to set things like font sizes on the parent unless you really need to.

this is really good advice. Even tho you can override properties like font sizes , it becomes a math nightmare.
You shoudl also keep specificity in mind ( which may be the root of your question)

<div class=“root”>
<div class=“parent”>
<div class=“child”>
<div class=“target”> some text</div>
</div>
</div>
</div>

you may thing you have targeted the target simply by
.root .child div { color:red;}
.target { color:green;}

color = red

you may thing you have targeted the target simply by because .root .child div is a more specific rule. in other words is not as simple as just using the same name in a selector the sum total of the weights of the ID, tags, and classes used in other rules must also be taken into account.

hope that helps