How can I disable inherited css styles

Question

So I am creating a container with rounded corners using the following method   div rounded       background   CFFEB6 url  tr gif   no-repeat top right    div rounded div       background  url  br gif   no-repeat bottom right    div rounded div div       background  url  bl gif   no-repeat bottom left    div rounded div div div       padding  10px      Now I want to use a div inside my container    button       border  1px solid  999       background  eeeeee url          text-align center     button hover       background-color  c4e2f2      lt div class  round  gt  lt div gt  lt div gt  lt div gt   lt div class  button  gt  lt a href     gt Test lt  a gt  lt  div gt   lt  div gt  lt  div gt  lt  div gt  lt  div gt    However  with I put a div inside my nested divs  the button has the bl image in the corner    How do I remove the inherited background image

User · Answer

Simplest is to class-ify all of the divs:

div.rounded {
    background: #CFFEB6 url('tr.gif') no-repeat top right;
}
div.rounded div.br {
    background: url('br.gif') no-repeat bottom right;
}
div.rounded div.br div.bl {
    background: url('bl.gif') no-repeat bottom left;
}
div.rounded div.br div.bl div.inner {
    padding: 10px;
}
.button {
    border: 1px solid #999;
     background:#eeeeee url('');
    text-align:center;
}
.button:hover {
    background-color:#c4e2f2;
}

And then use:

<div class='round'><div class='br'><div class='bl'><div class='inner'>
<div class='button'><a href='#'>Test</a></div>
</div></div></div></div>

User · Answer

Give the div you don t want him inheriting the property background too

User · Answer

Cascading Style Sheet are designed for inheritance  Inheritance is intrinsic to their existence  If it wasn t built to be cascading  they would only be called  Style Sheets     That said  if an inherited style doesn t fit your needs  you ll have to override it with another style closer to the object  Forget about the notion of  blocking inheritance    You can also choose the more granular solution by giving styles to every individual objects  and not giving styles to the general tags like div  p  pre  etc    For example  you can use styles that start with   for objects with a specific ID    lt style gt   dividstyle      font-family MS Trebuchet     lt  style gt   lt div id  dividstyle  gt Hello world lt  div gt    You can define classes for objects    lt style gt   divclassstyle      font-family  Calibri     lt  style gt   lt div class  divclassstyle  gt Hello world lt  div gt    Hope it helps

User · Answer

The cleanest solution is probably to specify your divs as exact children   Try changing this   div rounded div div       background  url  bl gif   no-repeat bottom left      To this   div rounded  gt  div  gt  div       background  url  bl gif   no-repeat bottom left

User · Answer

You can use the unset keyword to reset a property  div rounded div div div       background-image  unset     reset background        padding  unset     reset padding       More info on developer mozilla org

User · Answer

The simple answer is to change  div rounded div div div       padding  10px      to  div rounded div div div       background-image  none      padding  10px      The reason is because when you make a rule for div rounded div div it means every div element nested inside a div inside a div with a class of rounded  regardless of nesting   If you want to only target a div that s the direct descendent  you can use the syntax div rounded div  gt  div  though this is only supported by more recent browsers    Incidentally  you can usually simplify this method to use only two divs  one each for either top and bottom or left and right   by using a technique called Sliding Doors

User · Answer

If you control both the HTML and CSS  I d suggest switching to using ID s on all the divs needed for the rounded corner   CSS   d1       background   CFFEB6 url  tr gif   no-repeat top right     d2       background  url  br gif   no-repeat bottom right     d3       background  url  bl gif   no-repeat bottom left     d4       padding  10px      HTML   lt div id  d1  gt  lt div id  d2  gt  lt div id  d3  gt  lt div id  d4  gt       lt div class  button  gt  lt a href     gt Test lt  a gt  lt  div gt   lt  div gt  lt  div gt  lt  div gt  lt  div gt

[html] How can I disable inherited css styles?

Examples related to html

Examples related to css

Examples related to stylesheet