how to prevent css inherit?

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/

Unfortunately, it is not possible to not inherit in CSS. If you don't want a specific span to not not have certain styles, you'll have to target it specifically and override the styles, or you'll have to target other spans (with a class, for example) and apply the styles to them. — Nadh
– Nadh, Commented Apr 28, 2012 at 18:22
@NADH the problem the OP describes is not actually a style inheritance problem, just a selector one. — Matt Ball
– Matt Ball, Commented Apr 28, 2012 at 18:23

Matt Ball · Accepted Answer · 2012-04-28 18:20:48Z

6

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/

answered Apr 28, 2012 at 18:20

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Ali Akbari Over a year ago

but I think this question can have more general answer. Its better to use classes...

coderanger · Accepted Answer · 2012-04-28 18:21:10Z

2

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

answered Apr 28, 2012 at 18:21

coderanger

54.6k4 gold badges60 silver badges85 bronze badges

Comments

Jukka K. Korpela · Accepted Answer · 2012-04-28 18:28:13Z

2

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.)

answered Apr 28, 2012 at 18:28

Jukka K. Korpela

203k38 gold badges281 silver badges408 bronze badges

Comments

Nauphal · Accepted Answer · 2012-04-28 18:23:45Z

0

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

answered Apr 28, 2012 at 18:23

Nauphal

6,1824 gold badges30 silver badges43 bronze badges

Comments

asdasd · Accepted Answer · 2019-04-07 11:18:27Z

0

Just use all: initial at your root element.

.selector 
{
    all: initial;
}

answered Apr 7, 2019 at 11:18

asdasd

7,3306 gold badges16 silver badges36 bronze badges

Collectives™ on Stack Overflow

how to prevent css inherit?

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related