Question

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/

Answer 1

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/