CODEWITHSUNDEEP
htmlcss
I'll-Be-Back
I'll-Be-Back

Reputation: 10828

how to prevent css inherit?

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/

Upvotes: 2

Views: 9268

Answers (5)

asdasd
asdasd

Reputation: 7200

Just use all: initial at your root element.

.selector 
{
    all: initial;
}

Upvotes: 0

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201528

This has nothing to do with inheritance.

To use CSS properly, assign properties to elements using selectors that match only the elements that you wish to affect. (The example given is far too artificial for a useful analysis and for constructive suggestions on a better approach.)

Upvotes: 2

Nauphal
Nauphal

Reputation: 6192

You can use this

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

If you use like .main-content > span that style will only affect to the immediate child spans of .main-content class

Upvotes: 0

coderanger
coderanger

Reputation: 54191

Use .main-content > span, that selects only directly descendent elements.

Upvotes: 2

Matt Ball
Matt Ball

Reputation: 359776

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/

Upvotes: 6

Related Questions