how to prevent css inherit?

css, html

Solution

Use a selector that actually selects the elements you want. In this case `>`, the child selector, will suffice.

.main-content > span {
    background: #921192;
    color: white;
    padding: 3px 4px;
    margin: 0 5px;
}

http://jsfiddle.net/mattball/mQFz2/

Problem

What is so annoying about CSS when you add style in the css class, it may apply other element/class by itself. What the best way to prevent that? For example: HTML: ``` <div class='main-content'> <p> Hello World </p> <span> Test One </span> <div class='column'> <span> Test Two</span> </div> </div> ``` CSS: ``` .main-content span { background: #921192; color: white; padding: 3px 4px; margin: 0 5px; } .column span { font-size:20px; text-transform:none; display:inline-block; }​ ``` I do not want "Test Two" `<span>` to have a background color. Test: http://jsfiddle.net/szm9c/1/

Original source